使用REST服務在頁面上初始化多個Bing圖與圖釘

我試圖在同一頁上顯示多個bing地圖，每個地圖都有基於地理編碼顯示的指定位置。使用REST服務在頁面上初始化多個Bing圖與圖釘

我遇到的問題是這樣的......

當我展示一個地圖和與位置intialise它 - 這是罰款。
當我運行同樣的動作連續多次到多個地圖的div不顯示正確的 - 往往只是intialised最後一個地圖顯示（有時是相當隨機的，雖然，有兩個被顯示的與位置有時混合）。有趣的是，如果我在每次地圖初始化之間暫停一段時間，提醒一切都會正常工作（在我的示例中，只需取消註釋即可看到）。這似乎發生在FF，而不是IE由於我剛纔注意到的某些原因。

我構建了一個基於msdn example provided的單頁html示例。整個標記在下面，複製並保存爲html文件，它應該如上所述工作。爲了便於理解和更好地與我的問題進行溝通，我只是鞭打了這一點。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 

     <script type="text/javascript"> 

     var map = null; 
     var mapId = ''; 
     var geocode = '' 

     function InistionaliseMaps() 
     { 
      //alert('1'); 
      InistialiseMap('mapDiv1', 'London'); 
      //alert('2'); 
      InistialiseMap('mapDiv2', 'Barcelona'); 
      //alert('3'); 
      InistialiseMap('mapDiv3', 'Auckland'); 
      //alert('4'); 
      InistialiseMap('mapDiv4', 'New York'); 
      //alert('5'); 
      InistialiseMap('mapDiv5', 'Amsterdam'); 
     } 

     function InistialiseMap(mId, gc) 
     { 
      mapId = mId; 
      geocode = gc; 

      GetMap(); 
      ClickGeocode(); 
     } 

     function GetMap() 
     { 
      // Initialize the map 
      map = new Microsoft.Maps.Map(document.getElementById(mapId),{credentials:"Auy_rZ68nbxt5cE4EYg7o1pFD3IpEg6sgNNWC8RyP04f12t9GSf0YQzlnBmgyJV3", mapTypeId:Microsoft.Maps.MapTypeId.road}); 

     } 

     function ClickGeocode(credentials) 
     { 
      map.getCredentials(MakeGeocodeRequest); 
     } 

     function MakeGeocodeRequest(credentials) 
     { 

      var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(geocode) + "&output=json&jsonp=GeocodeCallback&key=" + credentials; 

      CallRestService(geocodeRequest); 
     } 

     function GeocodeCallback(result) 
     { 
      alert("Found location: " + result.resourceSets[0].resources[0].name); 

      if (result && 
        result.resourceSets && 
        result.resourceSets.length > 0 && 
        result.resourceSets[0].resources && 
        result.resourceSets[0].resources.length > 0) 
      { 
       // Set the map view using the returned bounding box 
       var bbox = result.resourceSets[0].resources[0].bbox; 
       var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3])); 
       map.setView({ bounds: viewBoundaries}); 

       // Add a pushpin at the found location 
       var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]); 
       var pushpin = new Microsoft.Maps.Pushpin(location); 
       map.entities.push(pushpin); 
      } 
     } 

     function CallRestService(request) 
     { 
      var script = document.createElement("script"); 
      script.setAttribute("type", "text/javascript"); 
      script.setAttribute("src", request); 
      document.body.appendChild(script); 
     } 

     </script> 
    </head> 
    <body onload="InistionaliseMaps();"> 
     <div id='mapDiv1' style="position:relative; width:400px; height:400px;"></div> 
     <div id='mapDiv2' style="position:relative; width:400px; height:400px;"></div> 
     <div id='mapDiv3' style="position:relative; width:400px; height:400px;"></div> 
     <div id='mapDiv4' style="position:relative; width:400px; height:400px;"></div> 
     <div id='mapDiv5' style="position:relative; width:400px; height:400px;"></div>  
    </body> 
</html>

我相信這可能是發生在頁面加載快和REST服務的連續通話是重疊的，或者在REST服務使用的對象沒有被破壞之前下一個電話或類似的東西。說實話，我真的很困惑。

如果有人知道這裏可能會發生什麼，解決問題的方法或通過Bing地圖更好的方式來做到這一點 - 這將是非常值得讚賞的，我將永遠在你的債務債務。謝謝。

來源

2012-06-18 Geoffry

我還沒有試過你的代碼，通過檢查我認爲我發現了一些會導致你所看到的行爲的問題。問題與你使用全局變量在GeocodeCallback()中引用你的地圖有關。 GeocodeCallback()是一個回調函數，在地理編碼完成後運行，沒有任何保證，如果您發出多個CallRestService()s,GeocodeCallback()，則每個請求將以相同的順序被調用。您在GetMap()中將map變量設置爲您當前的地圖，然後繼續撥打CallRestService()，然後再次呼叫InistialiseMap()，這將使用新地圖覆蓋map變量。如果在InistialiseMap()之前調用GeocodeCallback()，則不會有任何問題（正如使用警報所示，這很可能會導致這種情況發生）。但是，在調用GeocodeCallback()s之前，有可能會有多個InistialiseMap()運行，因此無法確定哪個地圖將由GeocodeCallback()返回的地理編碼結果更新。

下面是解決您的問題的簡單方法。不是很優雅，我沒有測試過代碼，但是想法是爲每個地圖都有一個單獨的地理編碼回調，並且將每個地圖存儲在它自己的可擴展模塊中。

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 

    <script type="text/javascript"> 

    var mapOne = null; 
    var mapTwo = null; 
    var geocode = '' 

    function InistionaliseMaps() 
    { 
     InistialiseMap('mapDiv1', mapOne, 'London'); 
     InistialiseMap('mapDiv2', mapTwo,'Barcelona'); 
    } 

    function InistialiseMap(mId, mapVar, gc) 
    { 
     geocode = gc; 

     GetMap(mId, mapVar); 
     ClickGeocode(mapVar); 
    } 

    function GetMap(mapIdName, mapVar) 
    { 
     // Initialize the map 
     mapVar = new Microsoft.Maps.Map(document.getElementById(mapId),{credentials:"Auy_rZ68nbxt5cE4EYg7o1pFD3IpEg6sgNNWC8RyP04f12t9GSf0YQzlnBmgyJV3", mapTypeId:Microsoft.Maps.MapTypeId.road}); 
    mapVar.MapIdName = mapIdName ; 
    } 

    function ClickGeocode(mapVar) 
    { 
     mapVar.getCredentials(MakeGeocodeRequest) 
    } 

    function MakeGeocodeRequest(credentials) 
    { 
     // Figure out how to get the map that called this... 
     var mapThatCalledThis = ... 
     var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(geocode) + "&output=json&jsonp=GeocodeCallback"+mapThatCalledThis .MapIdName+"&key=" + credentials; 

     CallRestService(geocodeRequest); 
    } 

    function GeocodeCallbackmapDiv1(result) 
    { 
      // common stuff 
      mapOne.entities.push(pushpin); 
     } 
    } 
    function GeocodeCallbackmapDiv2(result) 
    { 
      // common stuff 
      mapTwo.entities.push(pushpin); 
     } 
    } 
    function CallRestService(request) 
    { 
     var script = document.createElement("script"); 
     script.setAttribute("type", "text/javascript"); 
     script.setAttribute("src", request); 
     document.body.appendChild(script); 
    } 

    </script>

好運。

來源

2012-06-19 17:42:45

非常感謝您的回答，我今天將研究如何使用這種方法，並讓您瞭解它的發展方向！ – Geoffry

使用REST服務在頁面上初始化多個Bing圖與圖釘

回答

相關問題