Rafraîchissant carte et des marqueurs avec angulaires-google-maps
Salut, je suis en utilisant le angulaires-google-maps pour mon projet. Le code html et le code js est comme suit
html:
<ui-gmap-markers models="apartments" coords="'loc'" icon="'assets/images/map_icon_normal.png'" idkey="'_id'"
fit="'false'" click="click">
<ui-gmap-windows show="'show'" >
<div ng-non-bindable>{{streetAddress}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
Script:
angulaire.module('myApp')
.controller('MapCtrl',
function ($scope, $routeParams, Map, uiGmapGoogleMapApi) {
$scope.apartments = [];
$scope.customIcon = "../../assets/images/map_icon_normal.png"
$scope.map = {
center: {
latitude: $routeParams.lat,
longitude: $routeParams.lon
},
zoom: 5,
bounds: {},
events: {
tilesloaded: function (map) {
//console.log('tiles loaded');
$scope.$apply(function () {
$scope.mapInstance = map;
//console.log(map.getBounds().getNorthEast());
$scope.searchbox.options.bounds = new google.maps.LatLngBounds($scope.mapInstance.getBounds().getNorthEast(),
$scope.mapInstance.getBounds().getSouthWest());
});
},
idle: function(map) {
$scope.map.refresh = false;
},
resize: function(map) {
console.log('resize');
},
dragend: function() {
}
},
markersEvents: {
click: function(marker, eventName, model, args) {
console.log('markerEvent click');
$scope.map.window.model = model;
$scope.map.window.show = true;
}
},
window : {
marker: {},
show: false,
closeClick: function() {
this.show = false;
},
options: {} //define when map is ready
},
control: {},
refresh: function () {
$scope.map.control.refresh();
}
}
uiGmapGoogleMapApi.then(function (map) {
$scope.getData(20, 0, map);
map.visualRefresh = true;
$scope.mapInstance = map;
})
$scope.getData = function(limit, offset, map) {
Map.getApartments($routeParams.lat, $routeParams.lon, limit, offset).success(function (data) {
///----- I get undefined error here---
$scope.map.control.refresh();
});
}})
}
Je ne suis pas sûr de la façon d'actualisation de la carte avec les nouveaux marqueurs ou même déclencher une mise à jour de la carte. J'ai joué un peu avec le "contrôle" et "actualiser" paramètres de l'interface utilisateur-gmap-google-map mais impossible de le faire fonctionner.
Je suis confronté au même problème, j'ai trouvé la nouvelle fonctionnalité d'actualisation, par exemple: $champ d'application.carte.de contrôle.refresh({latitude: 32.779680, longitude: -79.935493}); mais il ne fonctionne pas pour moi, avez-vous réussi à résoudre ce problème?
OriginalL'auteur rOrlig | 2015-03-19
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser
uiGmapIsReady
--- pasuiGmapGoogleMapApi
--- attendrecontrol
objets d'être augmentée avec leurs méthodes (telles querefresh
).La
uiGmapIsReady
service fournit une promesse qui résout lorsque tous lesuiGmapGoogleMap
directives ont été entièrement initialisé, alors que leuiGmapGoogleMapApi
service résout simplement lors de la Google Maps API JS a chargé.Voir cette réponse pour un exemple d'utilisation de
uiGmapIsReady
. Et bien sûr, n'oubliez pas les docs.Au sujet de comment obtenir des mises à jour de vos modèles de propriété sur la portée de causer des mises à jour de votre carte, votre exemple de code doit être étoffé et nettoyé afin de vous y aider. (Par exemple, quelle est la résolution de
getApartments
faire pour mettre à jour$scope.apartments
? Ou peut-être poser cette question est elle-même la réponse?) Jetez un oeil à ce violon, cela peut vous aider dans l'intervalle.OriginalL'auteur William
Essayer
dorebuildall
attribut.Plus d'informations sur: http://angular-ui.github.io/angular-google-maps/
Pouvez-vous créer un plnkr pour cela?
OriginalL'auteur Vinay K