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

我想将bing地图集成到网页上，并且还想将动态引脚和描述框添加到地图中。所以我添加了这个JS脚本。使用json将引脚和描述框放在bing地图上

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调用是成功的，这是我的Json我Ajax调用后得到。地图显示正常，但不添加引脚。这里可能有什么问题？请提出解决方案。

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

来源

2014-12-25 HungryDB

一旦你的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 API：http://rbrundritt.wordpress.com/my-book/

来源

2014-12-29 17:23:19 rbrundritt

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

回答

相关问题