web-dev-qa-db-ja.com

Angular Googleマップ-すべてのマーカーに収まるように自動的に「中心」と「ズーム」を設定します

Googleマップ内に動的に生成されたマーカーのリストがあります。マップの中心をすべてのマーカーの中心にして、すべてのマーカーが表示されるように十分にズームアウトします。

地図の中心を計算することに関しては、おそらくこれはすべての緯度と経度を繰り返し処理し、中心点を見つけることで可能になるでしょう。しかし、ズームがどうあるべきかを計算するための最良の方法がわかりません。

これは可能ですか？

私の地図は次のようにテンプレートで使用されています：

_<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId">
    </ui-gmap-marker>
</ui-gmap-google-map>
_

[〜＃〜]更新[〜＃〜]

Angular @Tiborgからのアドバイスによる実装を試みました：

_uiGmapGoogleMapApi.then(function(maps) {
    $scope.map = {
        center: $scope.$storage.params.views.map.location,
        zoom: $scope.$storage.params.views.map.zoom,
        events: {
            click: function() {
                var bounds = new google.maps.LatLngBounds();
                for (var i in $scope.filteredHomes) {
                    bounds.extend($scope.filteredHomes[i].location);
                }
                $scope.map.fitBounds(bounds);
            }
        }
    };
});
_

これはコンソールエラーを生成します：TypeError: undefined is not a function (evaluating 'a.lat()')

angularjsgoogle-mapsangular-ui
15
Fisu

次のように、Google Maps APIでLatLngBoundsクラスを使用します。

var bounds = new google.maps.LatLngBounds();
for (var i in markers) // your marker list here
    bounds.extend(markers[i].position) // your marker position, must be a LatLng instance

map.fitBounds(bounds); // map should be your map class

それはあなたのすべてのマーカーに合うように地図をうまくズームして中央に配置します。

もちろん、これは純粋なjavascriptであり、angularバージョンではないため、angularでの実装に問題がある場合（または、マーカーを取得した場所からのマップインスタンス）、お知らせください。

17
Tiborg

angular-google-mapsがこの機能を処理しました。必要なことは、マーカーディレクティブ（ui-gmap-markers）にfit = "true"属性を追加することだけです。例：<ui-gmap-markers models="map.markers" fit="true" icon="'icon'">ドキュメントを参照してください http://angular-ui.github.io/angular-google-maps/#!/api

17
Hasteq

別の問題の答えが投稿されています： https://stackoverflow.com/a/23690559/509506 その後、この行を追加するだけです：

$scope.map.control.getGMap().fitBounds(bounds);
6
Aminovski

すべての返信のおかげで、私はこのコードを手に入れました。

var bounds = new google.maps.LatLngBounds();
for (var i = 0, length = $scope.map.markers.length; i < length; i++) {
  var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
}
$scope.map.control.getGMap().fitBounds(bounds);

誰かのお役に立てば幸いです。

4
Jesús Sobrino

また、タイムアウトを使用して、適切にダイジェストされていることを確認してください

 uiGmapIsReady.promise()
          .then(function (map_instances) {
            var bounds = new google.maps.LatLngBounds();
            for (var i in $scope.map.markers) {
              var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
            }

            $timeout(function() {
              map_instances[0].map.fitBounds(bounds);
            }, 100);
          });
0
Sameer Shenai