Bing地圖的信息框

Question

我目前正在研究bing地圖應用程序，並且當用戶單擊該圖釘時我似乎無法獲取信息框。我一直在關注SDK，它應該幾乎完全一樣。繼承人我有什麼：

// *********************************** 
// Function creates a single pin 
// and returns a reference to the pin 

function createMapPin(latLong, sName) { 
    var pinImg = "imagespins/Good.png"; 


var pin = new Microsoft.Maps.Pushpin(latLong, { 
    icon: pinImg, 
    anchor: new Microsoft.Maps.Point(8, 8), 
    draggable: true, 
    width: 48, 
    height: 48 
}); 

pin.title = sName; 


pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
      { title: 'My Pushpin', 
       description: 'This pushpin is located at (0,0).', 
       visible: false, 
       offset: new Microsoft.Maps.Point(0, 15) 
      }); 



// Add handlers for the pushpin events 
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
// Hide the infobox when the map is moved. 
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox); 

map.entities.push(pin); 
map.entities.push(pinInfobox); 

    return pin; 
} 

function displayInfobox(e) { 
    pinInfobox.setOptions({ visible: true }); 
} 


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

的引腳都創建並添加到地圖中成功當用戶點擊引腳上它進入dispayInfoBox方法，但在MessageBox只是似乎沒有出現。

任何建議都非常appreactiate。謝謝！

Answer 1

你的代碼有效，我試過了，只要你只撥打createMapPin()一次。但根據您的代碼判斷，您的意圖是多次致電createMapPin()，這將導致infobox停止按照您的想法行事。原因是這樣的一行：

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
      { title: 'My Pushpin', 
       description: 'This pushpin is located at (0,0).', 
       visible: false, 
       offset: new Microsoft.Maps.Point(0, 15) 
      }); 

，因爲你沒有申報pinInfobox經由var關鍵字的本地變量，它含蓄地被聲明爲一個全局變量。我不認爲這是你的意圖，因爲只要你再次呼叫createMapPin()，pinInfobox，因爲它是一個全局變量，將被覆蓋。所以，實際上，即使您不斷創建新的信息框，它也只有一個實例，並且它不斷獲得新的值。所以如果你點擊一個圖釘，一個信息框可能會彈出一個屏幕外的地方，你不會看到它。我相信你的意圖是有一個信息框與每個圖釘相關聯？要做到這一點，你需要聲明的信息框作爲一個局部變量，像這樣：

var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
     { title: 'My Pushpin', 
      description: 'This pushpin is located at (0,0).', 
      visible: false, 
      offset: new Microsoft.Maps.Point(0, 15) 
     }); 

您還需要修改您的事件處理程序與信息框對象的本地版本進行交互，而不僅僅是單一的全局變量。做最簡單的方法是隻申報您createMapPin()功能範圍的事件處理程序爲匿名函數，並重寫這個關鍵字使用功能的意義結合：

Microsoft.Maps.Events.addHandler(pin, 'click', function (e) { 
    this.setOptions({ visible: true }); 
} .bind(pinInfobox)); 
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) { 
    this.setOptions({ visible: false }); 
}.bind(pinInfobox)); 

所以這裏是你的更新代碼：

function createMapPin(latLong, sName) { 
    var pinImg = "imagespins/Good.png"; 

    var pin = new Microsoft.Maps.Pushpin(latLong, { 
     icon: pinImg, 
     anchor: new Microsoft.Maps.Point(8, 8), 
     draggable: true, 
     width: 48, 
     height: 48 
    }); 

    pin.title = sName; 

    var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
     { 
      title: 'My Pushpin', 
      description: 'This pushpin is located at (0,0).', 
      visible: false, 
      offset: new Microsoft.Maps.Point(0, 15) 
     }); 

    // Add handlers for the pushpin events 
    Microsoft.Maps.Events.addHandler(pin, 'click', function(e) { 
     this.setOptions({ visible: true }); 
    }.bind(pinInfobox)); 
    // Hide the infobox when the map is moved. 
    Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) { 
     this.setOptions({ visible: false }); 
    }.bind(pinInfobox)); 
    map.entities.push(pin); 
    map.entities.push(pinInfobox); 
    return pin; 
}