使用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地圖上

回答

相關問題