angulaires-google-maps centre de zoom de multiples marqueurs

Je suis en utilisant AngularJS pour Google Maps et de vouloir du centre et effectuer un zoom sur une carte basée sur plusieurs marqueurs qui sont chargés dynamiquement. C'est pour un Cordova application à l'aide de la Ionique Cadre.

Voici mon avis:

<ion-view title="" ng-controller="MapCtrl as vm">
 <ion-content class="padding">
  <google-map id="mainMap" control="vm.googleMap" draggable="true" center="vm.map.center" zoom="vm.map.zoom" mark-click="false">
      <markers idKey="mainMap" fit="vm.map.fit">
          <marker idKey="marker.id" ng-repeat="marker in vm.map.markers" coords="marker.coords" options="marker.options">
              <marker-label content="marker.name" anchor="2 0" class="marker-labels"/>
          </marker>
      </markers>
  </google-map>
 </ion-content>
</ion-view>

Voici mon controller:

angular.module('myApp.controllers', [])
.controller('MapCtrl', function($scope, $ionicPlatform) {
var vm = this;
vm.googleMap = {}; //this is filled when google map is initialized, but it's too late
vm.mapMarkers = [];
vm.arrMarkers = [
{
id: "home",
name: "home",
coords: {
latitude:xxxxxxx, //valid coords
longitude:xxxxxxx //valid coords
},
options: {
animation: google.maps.Animation.BOUNCE
}
},
{
id: "placeAId",
name: "Place A",
coords: {
latitude:xxxxxxx, //valid coords
longitude:xxxxxxx //valid coords
}
},
{
id: "placeBId",
name: "Place B",
coords: {
latitude:xxxxxxx, //valid coords
longitude:xxxxxxx //valid coords
}
}
];
vm.map = {
center: { //how to determine where to center???
latitude: xxxxxxx, //valid coords
longitude: xxxxxxx //valid coords
},
zoom: 12, //how to determine zoom dynamically???
fit: true,
markers: vm.arrMarkers
};
var setMapBounds = function () {
var bounds = new google.maps.LatLngBounds();
createMarkers();
var markers = vm.mapMarkers;
for(var i=0; i<markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
var map = vm.googleMap.control.getGMap();
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1);
//set a minimum zoom
//if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
map.setZoom(15);
}
};
var createMarkers = function() {
var map = vm.googleMap.control.getGMap(); //vm.googleMap.control is undefined because this fire before map is initialized
angular.forEach(vm.restaurants, function(restaurant, index) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(restaurant.coords.latitude, restaurant.coords.longitude),
title: restaurant.name
});
vm.mapMarkers.push(marker);
});
};
$ionicPlatform.ready(function() {
setMapBounds();
});

})

Donc, ma question est comment puis-je centre et de zoom de la carte à l'aide de plusieurs de charger dynamiquement des marqueurs? Aussi, comment puis-je obtenir une instance de googleMap.de contrôle (vm.googleMap.de contrôle) avant de la carte est chargé?

vous devriez probablement vous regardez la démo de code et de l'API docs plus. Plus de la classique gmap code que vous avez est déjà intégré dans la directive. La Directive semble utiliser une inhabituelle de la convention d'avoir à envelopper les variables entre guillemets simples au sein de balisage
Les documents en ligne semblent être hors de date et j'ai été en passant à travers l'exemple de la démo de code, mais ne peut pas trouver quoi que ce soit. Pouvez-vous m'indiquer un extrait de code dans le code d'exemple qui pourrait l'aider?
ont été par un peu de même de la frustration à tout récemment. Ils n'ont d'améliorer les docs un peu à partir de quand j'ai commencé à utiliser il y a quelques mois. fit dans <markers> va gérer setMapBounds. Créer une démo en plunker, avec un peu de points de données et essayer de les aider. J'ai un projet que je continue à peaufiner même chose qui est actuellement en cours
Merci, mais je vais attendre jusqu'à ce que AngularJS pour Google Maps est plus mature. J'ai récemment mise à jour de l'Ionic framework et maintenant ma carte a disparu entièrement. Aussi, je n'ai pas aimé l'ajout de la dépendance lodash.underscore.js de toute façon.

OriginalL'auteur Que | 2014-09-14

Voici mon code juste au cas où quelqu'un a été vous vous demandez comment faire localement. C'est une solution simple pour ce dont j'avais besoin et mon en effet revenir à angualr-google maps, mais comme de maintenant, cela fonctionne très bien dans mon application.

angular.module('myApp.controllers', [])
.controller('MapCtrl', function($scope) {
var vm = this;
vm.googleMap = null; 
vm.mapMarkers = [];
var onSuccess = function(position) {
vm.userLocation.coords.latitude = position.coords.latitude;
vm.userLocation.coords.longitude = position.coords.longitude;
initializeMap();
};
var onError = function(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message);
};
vm.userLocation = {
id: "home",
title: "home",
coords: {
latitude: 33.636727,
longitude: -83.920702
},
options: {
animation: google.maps.Animation.BOUNCE
}
};
vm.places = [
{
id: "78869C43-C694-40A5-97A0-5E709AA6CE51",
title: "Place A",
coords: {
latitude: 33.625296,
longitude: -83.976206
}
},
{
id: "52319278-83AA-46D4-ABA6-307EAF820E77",
title: "Place B",
coords: {
latitude: 33.576522,
longitude: -83.964981
}
}
];
var addMarkers = function() {
var userLocation = new google.maps.Marker({
map: vm.googleMap,
position: new google.maps.LatLng(vm.userLocation.coords.latitude, vm.userLocation.coords.longitude),
//animation: vm.userLocation.options.animation,
title: vm.userLocation.title
});
vm.mapMarkers.push(userLocation);
angular.forEach(vm.places, function(location, index) {
var marker = new google.maps.Marker({
map: vm.googleMap,
position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
title: location.title
});
vm.mapMarkers.push(marker);
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < vm.mapMarkers.length; i++) {
bounds.extend(vm.mapMarkers[i].getPosition());
}
vm.googleMap.setCenter(bounds.getCenter());
vm.googleMap.fitBounds(bounds);
//remove one zoom level to ensure no marker is on the edge.
vm.googleMap.setZoom(vm.googleMap.getZoom() - 1);
//set a minimum zoom
//if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if (vm.googleMap.getZoom() > 15) {
vm.googleMap.setZoom(15);
}
};
var initializeMap = function() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 12,
center: new google.maps.LatLng(vm.userLocation.coords.latitude, vm.userLocation.coords.longitude)
};
var div = document.getElementById("map_canvas");
//var map = plugin.google.maps.Map.getMap(div, mapOptions);
vm.googleMap = new google.maps.Map(div, mapOptions);
addMarkers();
var width = screen.width;
var height = screen.height;
};
navigator.geolocation.getCurrentPosition(onSuccess, onError);
})

OriginalL'auteur Que

6

Votre réponse est bonne, mais ne comprennent pas l'utilisation de google maps directives que vous avez mentionné dans le début du post. Il y a un moyen de le faire à l'aide de ces directives, voici comment:

En supposant que nous sommes dans la directive
1. Définir scope.mapControl = {}; - il faudra de nouvelles méthodes d'accès pour la carte et des marqueurs
2. Lors de la définition de votre balisage pour les directives - pour la carte et le marqueur d'inclure cet attribut de contrôle à ajouter:
```
<ui-gmap-google-map center='map.center' zoom='map.zoom'    control="mapControl">
<ui-gmap-marker ng-repeat="location in locations" coords="location.coordinates" options="location.markerOptions" idkey="location.id" control="mapControl">
<ui-gmap-window options="location.markerWindowOptions" closeclick="closeMarkerWindow(location.id)" show="true">
<div>{{location.description}}</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
```
3. Dans votre directive de l'événement ou d'une méthode:
```
var map = scope.mapControl.getGMap();
var markers = scope.mapControl.getGMarkers();
var bounds = map.getBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
map.setZoom(map.getZoom() - 1);
```
Je pense que c'est la meilleure solution, car il utilise correctement angulars de l'architecture de données sont lier à la le modèle et vous vous souciez seulement de garder votre modèle correct - le point de vue est automatiquement rendu

OriginalL'auteur tomek

Vous devez vous connecter pour publier un commentaire.