2

同じページに複数の bing マップを表示しようとしています。各マップには、ジオコードに基づいて指定された場所が表示されます。

私が抱えている問題はこれです...

  • 1 つのマップを表示し、それを場所で初期化すると、問題ありません。
  • 同じアクションを複数のマップ div に対して連続して複数回実行すると、正しく表示されません。多くの場合、最後に初期化されたマップだけが表示されます (ただし、2 つが表示されたり、場所が混同されたりして、非常にランダムな場合もあります)。
  • おかしなことに、各マップの初期化の間にアラートを表示して一時停止すると、すべて正常に機能します (以下の例では、アラートのコメントを外すだけで確認できます)。これは、何らかの理由で IE ではなく FF で発生しているようです。

提供されている 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 に答える