2

Googleマップジオコーダーを使用してジオコーディングされた住所にパンするLeafletJSマップを正常に設定しました。ただし、「map.fitBounds」を使用してビューポートから適切なズームレベルを取得しようとしていますが、機能していないようです。私が使用しているコードは次のとおりです。

map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);
   map.fitBounds([[results[0].geometry.viewport.southwest.lat(), results[0].geometry.viewport.southwest.lng()],[results[0].geometry.viewport.northeast.lat(), results[0].geometry.viewport.northeast.lng()]]);

こちらの例をご覧ください：http：//chrismccreath.hostzi.com/geocode_test.html

グーグルマップジオコーダーの結果によって返される適切なビューポートにズームするように修正するにはどうすればよいですか？

4

3 に答える 3

5

次のようなプロパティはありませんresults[0].geometry.viewport.southwest/northeast（コンソール内のネットワークトラフィックを監視していたと思いますが、そこに表示されるものはコールバック関数に直接渡されません）。南西/北東を取得するには、のメソッドgetSouthWest()とgetNorthEast()を使用しますgoogle.maps.LatLngBounds。

results[0].geometry.viewportはgoogle.maps.LatLngBounds-objectですが、Leafletで直接使用することはできません。

配列またはLeaflet.LatLngBounds-objectに「変換」する必要があります。

これは機能するはずです：

map.fitBounds([
               [results[0].geometry.viewport.getSouthWest().lat(),
                results[0].geometry.viewport.getSouthWest().lng()],
               [results[0].geometry.viewport.getNorthEast().lat(),
                results[0].geometry.viewport.getNorthEast().lng()]
              ]);
于 2013-01-03T20:20:06.620 に答える
1

DrMolleは、リーフレットマップオブジェクトはGoogle Maps API v3オブジェクトではないと指摘しました（他の質問で参照）。これは機能します：

   map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);
   map.fitBounds([[results[0].geometry.viewport.getNorthEast()],
                  [results[0].geometry.viewport.getSouthWest()]]);

実例

ドキュメントに記載されているように：

  • results [] 。geometry.locationはgoogle.maps.LatLngであり、panToが引数として必要とします。
  • results [] 。geometry.viewportはgoogle.maps.LatLngBoundsであり、fitBoundsは引数として必要です。
于 2013-01-03T17:27:30.370 に答える
1

実例を投稿していただきありがとうございます。それは大いに役立ちました。それは私にとってすぐには機能しませんでしたが、機能するためにいくつかの調整を行う必要がありました。

function codeAddress() {
   var address = document.getElementById('address').value;
   geocoder.geocode( {'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
        if (results[0].geometry.viewport) {
            map.fitBounds([[results[0].geometry.viewport.getSouthWest().lat(),
                          results[0].geometry.viewport.getSouthWest().lng()],
                        [results[0].geometry.viewport.getNorthEast().lat(),
                         results[0].geometry.viewport.getNorthEast().lng()]]);
            map.setZoom(18);
        } else if (results[0].geometry.bounds) {
            map.fitBounds([[results[0].geometry.bounds.getSouthWest().lat(),
                     results[0].geometry.bounds.getSouthWest().lng()],
                    [results[0].geometry.bounds.getNorthEast().lat(),
                     results[0].geometry.bounds.getNorthEast().lng()]]);
        } else { // give up, pick an arbitrary zoom level
            map.panTo(results[0].geometry.location);
            map.setZoom(15);
      }
    } else {
      $('#result').html('Geocode was not successful for the following reason: ' + status);
    }
  });
}

他の誰かがそれを機能させる方法を理解できなかった場合、私がそれを投稿すると思っただけです。

再度、感謝します！

于 2013-02-22T23:27:56.947 に答える