web 接入 bind map

暖暖De幸福發表於2024-11-12
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>

        function loadMapScenario() {
            var myStyle1 = {
                "elements": {
                    "water": { "fillColor": "#a1e0ff" },
                    "waterPoint": { "iconColor": "#a1e0ff" },
                    "transportation": { "strokeColor": "#aa6de0" },
                    "road": { "fillColor": "#b892db" },
                    "railway": { "strokeColor": "#a495b2" },
                    "structure": { "fillColor": "#ffffff" },
                    "runway": { "fillColor": "#ff7fed" },
                    "area": { "fillColor": "#f39ebd" },
                    "political": { "borderStrokeColor": "#fe6850", "borderOutlineColor": "#55ffff" },
                    "point": { "iconColor": "#ffffff", "fillColor": "#FF6FA0", "strokeColor": "#DB4680" },
                    "transit": { "fillColor": "#AA6DE0" }
                },
                "version": "1.0"
            };

            var myStyle = {
                "version": "1.0",
                "settings": {
                    "landColor": "#0B334D"
                },
                "elements": {
                    "mapElement": {
                        "labelColor": "#FFFFFF",
                        "labelOutlineColor": "#000000"
                    },
                    "political": {
                        "borderStrokeColor": "#144B53",
                        "borderOutlineColor": "#00000000"
                    },
                    "point": {
                        "iconColor": "#0C4152",
                        "fillColor": "#000000",
                        "strokeColor": "#0C4152"
                    },
                    "transportation": {
                        "strokeColor": "#000000",
                        "fillColor": "#000000"
                    },
                    "highway": {
                        "strokeColor": "#158399",
                        "fillColor": "#000000"
                    },
                    "controlledAccessHighway": {
                        "strokeColor": "#158399",
                        "fillColor": "#000000"
                    },
                    "arterialRoad": {
                        "strokeColor": "#157399",
                        "fillColor": "#000000"
                    },
                    "majorRoad": {
                        "strokeColor": "#157399",
                        "fillColor": "#000000"
                    },
                    "railway": {
                        "strokeColor": "#146474",
                        "fillColor": "#000000"
                    },
                    "structure": {
                        "fillColor": "#115166"
                    },
                    "water": {
                        "fillColor": "#021019"
                    },
                    "area": {
                        "fillColor": "#115166"
                    }
                }
            };


            var map = new Microsoft.Maps.Map(document.getElementById('map-container'), {
                credentials: 'AvaP1SBV9Sq2eaSbCw7MnhRf7IArHPmgIFcaXtFs6K1zbFfzC6iXcZauWmC93pFC',
                //mapTypeId: Microsoft.Maps.MapTypeId.road,
                allowHidingLabelsOfRoad: true,
                showCopyright: false, //顯示版權資訊
                showMapTypeSelector: false,
                showMapLabels: false,
                zoom: 5,
                setLang: 'zh-HK',
                view: 'Auto',
                style: 'night',
                backgroundColor: Microsoft.Maps.Color.fromHex('#00FF00'),
                customMapStyle: myStyle,
                theme: 'night',
                enableClickableLogo: false,
                showDashboard: false, //指示是否顯示地圖導航控制元件
                showScalebar: false,//是否顯示比例尺
                mapTypeId: Microsoft.Maps.MapTypeId.roadDark,
                //theme: Microsoft.Maps.MapStylePickerStyle.DARK, // 設定為RoadLight主題
                //center: new Microsoft.Maps.Location(10, 100),
            });

            var infobox = null;

            function addMarker(latitude, longitude, title, description, pid, colour) {

                var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: colour });
                if (colour == 'red star') {
                    marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { icon: '/content/img/red.png' });
                }

                infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
                    visible: false
                });

                marker.metadata = {
                    id: pid,
                    title: title,
                    description: description
                };

                Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);
                Microsoft.Maps.Events.addHandler(marker, 'click', GoMatrix);

                infobox.setMap(map);
                map.entities.push(marker);
                marker.setOptions({ enableHoverStyle: true });
            };

            function showInfobox(e) {
                if (e.target.metadata) {
                    infobox.setOptions({
                        location: e.target.getLocation(),
                        title: e.target.metadata.title,
                        description: e.target.metadata.description,
                        visible: true
                    });
                }
            }

            function GoMatrix(e) {
                var s = JSON.stringify(e.target.metadata.title);
                s = eval(s);
                if (s.indexOf("Hefei") >= 0) {

                    window.location.href = '/Display/HFCDT';
                }
                else if (s.indexOf("Taichung") >= 0) {
                    window.location.href = '/Display/TCCDT';
                }
                else if (s.indexOf("Tainan") >= 0) {
                    window.location.href = '/Display/TNCDT';
                }
                else if (s.indexOf("Wuhan") >= 0) {
                    window.location.href = '/Display/WHCDT';
                }
                else if (s.indexOf("Chongqing") >= 0) {
                    window.location.href = '/Display/CQCDT';
                }
                else if (s.indexOf("Guangzhou") >= 0) {
                    window.location.href = '/Display/GZCDT';
                }
                else if (s.indexOf("Beijing") >= 0) {
                    window.location.href = '/Display/BJCDT';
                }
            }

            function hideInfobox(e) {
                infobox.setOptions({ visible: false });
            }

            //add markers to map
            addMarker(22.99121, 120.18496, 'Tainan,Taiwan', 'CDT TN', 1, '#425CFB');
            addMarker(24.363488, 120.846736, 'Taichung,Taiwan', 'CDT TC', 2, '#425CFB');
            addMarker(39.904667, 116.408195, 'Beijing,Beijing', 'CDT BJ', 3, '#425CFB');
            addMarker(29.55095, 106.51935, 'Chongqing,Chongqing', 'CDT CQ', 4, '#425CFB');
            addMarker(31.975764, 117.371529, 'Hefei, Anhui', 'CDT HF', 5, '#425CFB');
            addMarker(23.12908, 113.26436, 'Guangzhou, Guangdong', 'CDT GZ', 6, '#425CFB');
            addMarker(30.64353, 114.32472, 'Wuhan, Hubei', 'CDT WH', 7, '#425CFB');
            addMarker(31.47104, 104.73409, 'Mianyang, Sichuan', 'CDT MY', 8, '#425CFB');
            addMarker(30.5919, 104.1958, 'Chengdu, Sichuan', 'CDT CD', 9, 'purple');
            addMarker(34.345158, 108.70346, 'Xianyang, Shannxi', 'CDT XY', 10, 'purple');

            //Define a custom overlay class that inherts from the CustomOverlay class.
            PanningOverlay.prototype = new Microsoft.Maps.CustomOverlay({ beneathLabels: false });

            //Define a constructor for the custom overlay class.
            function PanningOverlay() {

            }

            //Implement the onAdd method to set up DOM elements, and use setHtmlElement to bind it with the overlay.
            PanningOverlay.prototype.onAdd = function () {
                //Create a div that will hold pan buttons.
                var container = document.createElement('div');
                //container.innerHTML = "<p style=\"color:red;font-style:italic;font-size:large;\" >MT&E Asia</p><p style=\"color:#425CFB;font-style:italic;font-size:large;\">Corning Plant</p>" +
                //    "<p style=\"color:#800080;font-style:italic;font-size:large;\">Joint Venture</p><p style=\"color:#ffa500;font-style:italic;font-size:large;\">Contract Manufacturing</p>";
                container.style.position = 'relative';
                container.style.top = '10px';
                container.style.left = '10px';
                //container.style.width = '200px';
                //container.style.backgroundColor = 'white';
                this.setHtmlElement(container);
            };

            //Implement the new custom overlay class.
            var overlay = new PanningOverlay();

            //Add the custom overlay to the map.
            map.layers.insert(overlay);
        }

文件地址:
https://learn.microsoft.com/zh-cn/bingmaps/v8-web-control/map-control-api/mapoptions-object

相關文章