0

Google マップにプロットしたい学校のリストがあります。Google のジオコーディング サービスを使用して、特定の郵便番号の lng/lat を検索しています。この情報を正常に取得したら、マーカーをドロップし、特定のマーカーがクリックされたときにインフォボックスを開く適切なイベント リスナーを追加します。

ジオコーダにリクエストを送信すると、それは学校のコンテキストになります。コールバックを受信すると、このコンテキストが失われます。以下のコードを見ると、ジオコーダーの結果が郵便番号を切り捨てて失敗することがありますが、これに対する不格好な解決策を考え出したことがわかります。

この問題を解決するには、jQuery の Deferred Object のようなものを使用する必要がありますか?

var geocoder;
var map;
var infowindow
var iterator = 0;
geosearch = new Array();

function drop() {
  for (var i = 0; i < schools.length; i++) {
    setTimeout(function() { // delay added to prevent being throttled
      addMarker();
      iterator++;
    }, i * 1000);
  }
}

function addMarker() {
  address = schools[iterator].addresses[0].address.zip;
  geosearch[address] = schools[iterator]; // this is how I'm keeping track of initial request

  geocoder.geocode( { 'address': address }, function(results, status) {
    var school = geosearch[results[0].address_components[0].short_name]; // loading the school associated with the initial request, which only works if the postcode completely matches up - clunky!

    if (status == google.maps.GeocoderStatus.OK) {

      // each school has tags, I want to set a marker if certain tags exist
      if ($.inArray('D', school.tags) > 0) {
        var image = 'map_markers/brown_MarkerD.png';
      } else if ($.inArray('C', school.tags) > 0) {
        var image = 'map_markers/red_MarkerC.png';
      } else if ($.inArray('B', school.tags) > 0) {
        var image = 'map_markers/yellow_MarkerB.png';
      } else if ($.inArray('A', school.tags) > 0) {
        var image = 'map_markers/green_MarkerA.png';
      } else {
        var image = 'map_markers/blue_MarkerZ.png';
      }

      // add the marker to the map, using result
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          draggable: false,
          icon: image,
          shadow: 'http://www.google.com/mapfiles/arrowshadow.png',
          animation: google.maps.Animation.DROP
      });

      // adds listening on marker so that popup box appears when clicked
      google.maps.event.addListener(marker, 'click', (function(marker, school) {
        return function() {
          infowindow.setContent(
            '<a href="https://vitalcpd.highrisehq.com/companies/'+school.id+'" target="_blank">'+school.name+'</a>'
            +'<address>'
            +school.addresses[0].address.street+'<br />'
            +school.addresses[0].address.city+'<br />'
            +school.addresses[0].address.state+'<br />'
            +school.addresses[0].address.zip+'<br />'
            +school.addresses[0].address.country+'<br />'
            +'</address>');
          infowindow.open(map, marker);
        }
      })(marker, school));

    } else {
      console.log("* NOT found: " + status);
    }
  });
}

function initialise() {
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(54.82659788452641,-3.417279296874991);
  var mapOptions = {
    zoom: 6,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  drop(); // loops through schools to add marker
}
4

2 に答える 2

1

ここで私が経験していた問題は、範囲の問題であり、特にaddMarker()関数内で学校を参照する方法に問題がありました。schoolsグローバル変数を使用して配列内の学校を参照するのではiteratorなく、代わりにこの学校を渡します。このようにして、このスコープ内で作成されたコールバックで正しい学校が常に参照されます。

var geocoder;
var map;
var infowindow
var iterator = 0;

function drop() {
  for (var i = 0; i < schools.length; i++) {
    setTimeout(function() {
      addMarker(schools[iterator]); // pass in the school as an argument
      iterator++;
      $('#current_school').text(iterator); // taken this out of addMarker()
    }, i * 1000);
  }
}

function addMarker(school) {
  geocoder.geocode( { 'address': school.addresses[0].address.zip }, function(results, status) {
    ... // the inners from here remain the same
  });
}
于 2012-07-26T09:51:41.360 に答える
1

住所をオフラインでジオコーディングし、座標をデータベース (または住所を保存している場所) に保存することをお勧めします。次に、座標を使用してマーカーを表示します。

また、ドキュメントのジオコーディング戦略に関するこの記事を確認することをお勧めします

あなたの質問に答えるには、javascript 関数クロージャーを使用して、アドレスをコールバック関数に関連付けることをお勧めします。

于 2012-07-23T22:58:45.877 に答える