2

私は現在、一連のマーカー（JSONオブジェクトからのデータ）を最終的にGoogleマップにプロットするページを使用しています。

マーカー配列を塗りつぶしたままにする方法を構成できないようです。getJSON呼び出しの範囲外であるため、配列は空です。

   var markers = [];
   var map;
   var mapOptions = {
            center: new google.maps.LatLng(0.0, 0.0),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
       for (index in data) addMarker(data[index]);

       function addMarker(_data) {
           var marker = new google.maps.Marker({
               position: new google.maps.LatLng(_data.lat, _data.lng),
               map: map,
               title: _data.name
           });
           markers.push(marker);

       }
       //markers = 3 at this point.
   });
   // markers = 0 at this point.

配列をまだ埋める必要がある理由は、ページ上の各マーカーのハイパーリンクを作成して、クリックするとマップが正しいマーカーにズームできるようにするためです。理想的には、これはjavascript関数呼び出しを伴うハイパーリンクであり、このjavascript関数は、選択されたハイパーリンクのマーカーインデックスをパラメーターとして渡され、次のようになります。

function zoomIn(selectedIndex) {
            map.setCenter(markers[selectedIndex].getPosition());
          }

ただし、この時点では、マーカー配列は空白であるため、各マーカーを保持しなくなります。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです。ありがとう

4

2 に答える 2

5

getJSON呼び出しで指定された関数は、getJSONが完了すると呼び出されます。これは、markers配列を使用するコードが実行されるときとは限りません。getJSON呼び出しで指定された関数内にzoomIn（またはマーカーを使用する必要があるもの）を呼び出すと、使用するときにマーカーが埋められると思います。重要なのは、markers配列が非同期で埋められているため、コードが実行される順序を確認する必要があります。

getJSON呼び出しの直後にマーカー配列をチェックしている場合は、チェックしないでください。使用されているzoomIn関数のマーカー配列を確認してください。

于 2012-09-15T15:19:54.110 に答える
1

このコードはすべて同じスコープにありますか？var markers = [];すべての関数からアクセスできるようにするには、これをグローバルスコープに含める必要があります。

したがって、次のようなことを行います。

var markers = [];
var map;
var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
function init(){
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
   for (index in data) addMarker(data[index]);

   function addMarker(_data) {
       var marker = new google.maps.Marker({
           position: new google.maps.LatLng(_data.lat, _data.lng),
           map: map,
           title: _data.name
       });
       markers.push(marker);

   }    
   });
}

function zoomIn(selectedIndex) {
        map.setCenter(markers[selectedIndex].getPosition());
      }

その後、アレイmarkersはグローバルスコープで使用可能になります。

于 2012-09-15T15:17:50.107 に答える