简体   繁体   English

必应地图添加更多图钉

[英]bing maps add more pushpins

i want to add more pushpins in this map. 我想在此地图中添加更多图钉。 i try to just copy this part: 我尝试只复制这一部分:

longitude[1] = 41.799645     //second defined Location
latitude[1] = 20.913514
title[1] = "Kipper Market"
description[1] = "Kipper Gostivar"

but i don't see any other added pin! 但我看不到其他添加的图钉! can someone please help. 有人可以帮忙吗? *i know almost nothing about java script so please don't judge me if i didn't compose my question right. *我对Java脚本几乎一无所知,所以如果我没有正确编写问题,请不要判断我。 thanx! 感谢名单!

        function GetMap() {
            var longitude = new Array();
            var latitude = new Array();
            var title = new Array();
            var description = new Array();


            longitude[0] = 42.0076215        //two defined locations
            latitude[0] = 20.9689308
            title[0] = "Kipper Market"
            description[0] = "Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia"

            longitude[1] = 41.799645     //second defined Location
            latitude[1] = 20.913514
            title[1] = "Kipper Market"
            description[1] = "Kipper Gostivar"

            var total = 0                //number of locations

            var pinInfoBox;  //the pop up info box
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            var pinLayer = new Microsoft.Maps.EntityCollection();
            var apiKey = "<api key>";

            map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});

            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);


            for (var i = 0 ; i < 3; i++){
                //add pushpins
                var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]);
                var pin = new Microsoft.Maps.Pushpin(latLon);

                pin.Title = title[i];//usually title of the infobox
                pin.Description = description[i]; //information you want to display in the infobox
                pinLayer.push(pin); //add pushpin to pinLayer
                Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
            }

            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);
            map.setView({zoom: 10, center: new Microsoft.Maps.Location(41.9117244, 21.0254933)});


        }

        function displayInfobox(e) 
        {
            pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
            pinInfobox.setLocation(e.target.getLocation());
        }

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


    </script>

    <style>
            #map { position: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;}
    </style>
    </head>
    <body onload="GetMap()">
        <div id="some stuff" style="width=100%; height:80px">
            some text
        </div>
        <div id="map" style="width=100%; height:400px">
        </div>
        <div id="some more stuff" style="width=100%; height:80px">
            some more text
        </div>              
    </body>
</html> 

The following example shows how to add multiple pushpins into Bing Maps: 以下示例显示了如何将多个图钉添加到Bing地图中:

 var pinInfobox; function GetMap() { var pushpinInfos = []; pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' }; pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' }; var infoboxLayer = new Microsoft.Maps.EntityCollection(); var pinLayer = new Microsoft.Maps.EntityCollection(); var apiKey = "<api key>"; var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey }); // Create the info box for the pushpin pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); infoboxLayer.push(pinInfobox); var locs = []; for (var i = 0 ; i < pushpinInfos.length; i++) { locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng); var pin = new Microsoft.Maps.Pushpin(locs[i]); pin.Title = pushpinInfos[i].title; pin.Description = pushpinInfos[i].description; pinLayer.push(pin); Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); } map.entities.push(pinLayer); map.entities.push(infoboxLayer); var bestview = Microsoft.Maps.LocationRect.fromLocations(locs); map.setView({ center: bestview.center, zoom: 10 }); } function displayInfobox(e) { pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) }); pinInfobox.setLocation(e.target.getLocation()); } function hideInfobox(e) { pinInfobox.setOptions({ visible: false }); } 
 <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script> <body onload="GetMap();"> <div id="map" style="position: relative; width: 600px; height: 450px;"></div> </body> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM