web-dev-qa-db-fra.com

Angular Google Maps: configurez automatiquement les options "centre" et "zoom" pour tous les marqueurs.

J'ai une liste de marqueurs générée dynamiquement dans mon Google Map. Je veux que le centre de la carte soit le centre de tous les marqueurs et que le zoom soit suffisamment réduit pour que tous les marqueurs apparaissent.

En termes de calcul du centre de la carte, cela pourrait peut-être être possible en parcourant toutes les latitudes et longitudes et en recherchant le point central. Cependant, je ne peux pas trouver le meilleur moyen de calculer ce que devrait être le zoom.

Est-ce possible à réaliser?

Ma carte est utilisée dans le modèle comme ceci:

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

METTRE &AGRAVE; JOUR

Tentative Angular implémentation d'après l'avis de @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);
            }
        }
    };
});

Cela produit l'erreur de console: TypeError: undefined is not a function (evaluating 'a.lat()')

angularjsgoogle-mapsangular-ui
14
Fisu

Utilisez la classe LatLngBounds dans l'API Google Maps, comme suit:

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

Il va bien zoomer et centrer la carte pour adapter tous vos marqueurs.

Bien sûr, il s’agit du javascript pur et non de la version angulaire. Par conséquent, si vous rencontrez des problèmes pour l’implémenter de manière angulaire (ou si vous n’avez pas accès à l’instance de carte à partir de laquelle vous obtenez les marqueurs), faites-le moi savoir.

17
Tiborg

angular-google-maps s'est occupé de cette fonctionnalité. Tout ce que vous avez à faire est d’ajouter un attribut fit = "true" dans votre directive markers (ui-gmap-markers). Exemple: <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> Veuillez vous reporter au document http://angular-ui.github.io/angular-google-maps/#!/api

17
Hasteq

La réponse a été postée pour un autre problème: https://stackoverflow.com/a/23690559/5095063 Après cela, il ne vous reste plus qu'à ajouter cette ligne:

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

Grâce à toutes les réponses, j'ai obtenu ce code qui fonctionne parfaitement pour moi:

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

J'espère que cela aidera à quelqu'un.

4
Jesús Sobrino

Également utiliser timeout pour s'assurer qu'il est digéré correctement

 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