必应地图添加更多图钉答案

【问题标题】：bing maps add more pushpins必应地图添加更多图钉
【发布时间】：2015-06-03 12:21:45
【问题描述】：

我想在这张地图中添加更多图钉。我试着复制这部分：

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

但我没有看到任何其他添加的图钉！有人可以帮忙吗？ *我对java脚本几乎一无所知，所以如果我没有正确地撰写我的问题，请不要评判我。谢谢！

        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>

【问题讨论】：

标签： javascript maps bing-maps

【解决方案1】：

以下示例展示了如何将多个图钉添加到 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>

【讨论】：

谢谢@Vadim 的答案，但你能告诉我我必须在上面的代码中添加什么来添加另一个引脚（当然还有一个信息框）。因为您的代码由于某种原因在我的网站中不起作用。我的代码有效，但我不能添加超过这 2 个引脚。我正在使用 WP。那么我必须复制哪一部分代码才能添加其他引脚？谢谢
在您的代码中添加了硬编码的图钉数量，因此您可以简单地将“i
是的，伙计。这个有效。非常感谢！不幸的是，在 cmets 中没有 upvoting 选项。谢谢你的帮助。