Question

我想在网页上集成bing map，并且还想在地图中添加动态图钉和描述框。所以我添加了这个JS脚本。

var map = null;
var pinInfoBox;  //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();

function getMap()
{
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'AlKxWcYscx4MaEZJeSsswwq2ZZ6U8QO283c0CCUL1opU-KJFxkA3C6qComzd5osp'});

    /* Ajax call to get pins */

    $.ajax({
           type: 'POST',
           url: 'api/getproperties.php',
           dataType: "json",
           data: {},
           success: function (response)
           {
             var pins = $.parseJSON(response);
             $.each(pins, function(pin) 
             {  
               var latLon = new Microsoft.Maps.Location(pin.Latitude,pin.Longitude);
               var newpin = new Microsoft.Maps.Pushpin(latLon);
               newpin.Title = pin.name;
               newpin.Description = "description here";
               pinLayer.push(newpin); 
               Microsoft.Maps.Events.addHandler(newpin, 'click', displayInfobox);
               map.entities.push(pinLayer);
               map.entities.push(infoboxLayer);
            });
        }
    });    

    /* end ajax call for property pins*/
}
function displayInfobox(e) 
{
    pinInfobox.setOptions({title: e.target.name, description: "description here", visible:true, offset: new Microsoft.Maps.Point(0,25)});
    pinInfobox.setLocation(e.target.getLocation());
}

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

Ajax调用是成功的，这是我在ajax调用后得到的Json。地图显示正常但未添加引脚。这可能是个问题？请提出解决方案。

 [{"loc_id":"L0002","Latitude":"53.136886","Longitude":"-7.689056","name":"demo"}
,{"loc_id":"L0004","Latitude":"-33.932079","Longitude":"18.428093","name":"demo1"}...more data]

Answer 1

获得JSON数据后，您需要遍历每个结果并使用纬度和经度数据创建图钉对象。由于此信息是您的响应中的字符串，因此您需要使用parseFloat方法将其转换为数字。以下是如何执行此操作的代码示例：

for(var i=0;i<data.length;i++){
    var loc = new Microsoft.Maps.Location(parseFloat(data[i].Latitude, parseFloat(data[i].Longitude);
    var pin = new Microsoft.Maps.Pushpin(loc);
    pin.Metadata = data[i];
    map.entities.push(pin);
}

以下是一些其他资源：

http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins1

我还建议您查看我的免费电子书，其中提供了有关在Windows应用商店应用中使用Bing Maps apis的大量信息：http://rbrundritt.wordpress.com/my-book/

使用json将引脚和描述框放在bing地图上

1 个答案: