2

我正在尝试在同一页面上显示多个 bing 地图，每个地图都有一个基于地理编码显示的指定位置。

我遇到的问题是这个...

  • 当我显示一张地图并用一个位置初始化它时 - 这很好。
  • 当我对多个地图 div 连续多次运行相同的操作时，它无法正确显示 - 通常只显示最后一张初始化的地图（但有时它是非常随机的，显示两个，有时位置混淆）。
  • 有趣的是，如果我在每次地图初始化之间暂停并显示警报，一切正常（在我下面的示例中，只需取消注释警报，您就可以看到）。由于我刚刚注意到的某种原因，这似乎发生在 FF 而不是 IE 中。

我基于提供的msdn 示例构建了一个单页 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 地图解决问题的更好方法 - 将不胜感激，我将永远在你的堆栈债务中。谢谢。

4

1 回答 1

0

我没有尝试过你的代码，通过检查我想我发现了一些会导致你看到的行为的问题。问题与您使用全局变量在GeocodeCallback(). GeocodeCallback()是一个在地理编码完成后运行的回调函数，不保证如果你发出多个CallRestService()s， GeocodeCallback()每个请求都会以相同的顺序被调用。您在 中将map变量设置为当前映射GetMap()，然后继续调用CallRestService()，然后再次调用，这将使用新映射InistialiseMap()覆盖变量。map如果GeocodeCallback()之前被调用InistialiseMap()，您不会有任何问题。（如使用最有可能迫使这种情况发生的警报所示）。InistialiseMap()但是，在调用之前可能会运行多次GeocodeCallback()s，因此无法确定哪个地图会使用返回的地理编码结果进行更新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-19T17:42:45.470 回答