angularjs – 使用angular-google-maps刷新地图和标记
发布时间:2020-12-17 06:47:37 所属栏目:安全 来源:网络整理
导读:嗨,我正在为我的项目使用angular-google-maps. html和js代码如下 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'"
嗨,我正在为我的项目使用angular-google-maps. html和js代码如下
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> 脚本: .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,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(); }); }}) } 我不确定如何使用新标记刷新地图,甚至触发对地图的更新.我玩过ui-gmap-google-map的“控制”和“刷新”参数但无法使其工作. 解决方法
您需要使用uiGmapIsReady —而不是uiGmapGoogleMapApi —来等待控件对象使用他们的方法(例如刷新)进行扩充.
uiGmapIsReady服务提供了一个承诺,该承诺在所有uiGmapGoogleMap指令完全初始化后解析,而uiGmapGoogleMapApi服务仅在加载Google Maps JS API时解析. 有关使用uiGmapIsReady的示例,请参阅this answer.当然,别忘了the docs. 关于如何更新示波器上的models属性以更新地图,您的代码示例需要充实并清理以帮助您. (例如,getApartments更新$scope.apartments的解决方案是什么?或者可能问这个问题本身就是答案?)看看this fiddle,它可能会帮助你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |