Angular Google Maps - automatisch 'Center' und 'Zoom' einstellen, um in alle Marker zu passen

Question

Ich habe eine dynamisch generierte Liste von Markern in meiner Google Map. Ich möchte, dass das Zentrum der Karte das Zentrum aller Marker ist und nur so weit herausgezoomt ist, dass alle Marker sichtbar sind.

In Bezug auf die Berechnung der Kartenmitte, könnte dies möglicherweise durch Iteration durch alle Breiten und Längen und die Suche nach dem zentralen Punkt möglich sein. Allerdings kann ich nicht herausfinden, wie der Zoom am besten berechnet werden kann.

Ist das möglich?

Meine Karte ist, wie dies in der Vorlage verwendet werden:

<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> 

UPDATE

Versuchte Angular Implementierung von Beratung von @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); 
      } 
     } 
    }; 
}); 

Dies erzeugt die Konsolenfehler: TypeError: undefined is not a function (evaluating 'a.lat()')

Answer 1

Verwenden Sie die LatLngBounds Klasse in Google Maps API, wie folgt aus:

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 

Es wird schön die Karte zoomen, und in der Mitte alle Markierungen zu passen.

Natürlich ist dies die reine Javascript, nicht die eckige Version, also wenn Sie Probleme haben, es in eckigen zu implementieren (oder Sie haben keinen Zugriff auf die Karteninstanz von wo Sie die Markierungen erhalten), lassen Sie es mich wissen .

Answer 2

angular-google-maps hat sich dieser Funktion angenommen. Alles, was Sie tun müssen, ist das fit = "true" -Attribut in Ihrer Marker-Direktive (ui-gmap-markers) hinzuzufügen. Beispiel: <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> Bitte lesen Sie das Dokument http://angular-ui.github.io/angular-google-maps/#!/api

Answer 3

Die Antwort ist für ein anderes Problem gepostet: https://stackoverflow.com/a/23690559/5095063 Danach müssen Sie nur noch diese Zeile hinzufügen:

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

Answer 4

Danke an all die Antworten, habe ich Dieser Code, der perfekt für mich funktioniert:

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); 

Ich hoffe, es wird jemandem helfen.

Answer 5

auch verwenden Timeout, um sicherzustellen, ist es verdaut richtig

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); 
      });