0

現在、オブジェクトの住所を使用して、マップ上に複数のポイントをプロットしています。プログラムはオブジェクト、住所をループし、geocodes各位置のマーカーをプロットします。

私が抱えている問題は、ユーザーがリスト内の場所をクリックすると、マップがその場所にパンすることです。API には値panTo()を受け入れる関数がありますが、ジオコード関数からlat, lngの結果はresults[0].geometry.location外部では利用できません。

質問

結果から何らかの方法で取得lat, lngし、既存のデータ オブジェクトに追加して、関数の外部で使用することで、関数で使用できるようにするにはどうすればよいpanTo()ですか?

【緯度・経度はhtmldata属性で出力】

クリックハンドラ

$('.place').on('click', function() {
    $this = $(this);
    lat = $this.data('lat');
    lng = $this.data('lng');

    map.panTo(new google.maps.LatLng(lat, lng));
});

データ

var locations = [
    {   
      id: 'place1',
      postcode: 'B1 1AA'
    },
    {   
     id: 'place2',
      postcode: 'CB9 8PU'
    }
];

コード

for (i = 0; i < locations.length; i++) {

  geocoder.geocode({'address': locations[i].postcode}, function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {

          marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map
          });

      } else {
          console.log('Geocode was not successful ' + status);
      }

  }); // end geocode


    $(places).append(
        '<li class="place" data-id="'+locations[i].id+'"  data-lat="<!--lat to go here-->" data-lng="<!--lng to go here-->">'+
            '<div class="place-wrap">'+
                '<h2>'+locations[i].name+'</h2>'+
                '<p class="territory">'+locations[i].territory+'<p>'+
            '</div>'+
        '</li>'
    );

} // end for
4

1 に答える 1