在单页应用程序上重用谷歌地图API实例
Reuse instance of Google Maps API on Single Page Application
假设我有一个单页应用程序(Angular JS应用程序),并在元素id googleMap
-上绘制一个Google Map实例
var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption)
然后我浏览应用程序路由,因此,破坏了googleMap
DOM元素,最后我回到了带有该元素的路由,现在我必须在该元素上重新绘制地图。
重新绘制地图的正确方法是什么?
正如我在这个答案中所读到的,我不必重新创建它,而是使用相同的实例。
我会小心
$scope.on('$destroy', function(){
mapInstance = null;
})
我有一个包含mapDOM元素的指令,调用这个方法从数据层中删除所有映射引用,所有侦听器,然后将映射设置为null。我在页面导航和重新创建映射实例之间检查堆,但旧的映射仍在堆中,导致内存使用量不断增加。
此外,你链接的答案建议重新使用你的地图实例,而不是试图删除它。谷歌地图开发人员也建议这种方法。我找到的解决方案是将directive元素传递给服务,并在新的子元素上添加一个子元素来创建映射。如果映射已经存在,只需将mapdiv附加到directive元素即可。下面是我的代码。
ng视图元素
<map-container></map-container>
指令
angular.module('project')
.directive('mapContainer', function($timeout, mapService) {
return {
template: '<div></div>',
restrict: 'E',
replace: true,
link: function(scope, element) {
$timeout(function () {
//Use the $timeout to ensure the DOM has finished rendering
mapService.createMap(element).then(function() {
//map now exists, do whatever you want with it
});
});
}
};
})
服务
angular.module('project')
.service('mapService', function($q) {
var lat = -33.1798;
var lng = 146.2625;
var minZoom = 5;
var maxZoom = 20;
var zoom = 6;
var mapOptions = null;
var map = null;
function initialiseGmap(element) {
return $q(function (resolve) {
if (map) {
//Map already exists, append it
element.append(map.getDiv());
resolve();
} else {
//No map yet, create one
element.append('<div id="map_canvas"></div>');
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, lng),
styles: hybridMap, //your style here
minZoom: minZoom,
maxZoom: maxZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
scaleControl: true,
zoomControl: false
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//create any map listeners you want here. If you want to add data to the map and add listeners to those, I suggest a seperate service.
resolve();
}
});
}
return {
createMap: function(elem) {
return initialiseGmap(elem);
},
getMap: function() {
return map;
},
//Create as many functions as you like to interact with the map object
//depending on our project we have had ones to interact with street view, trigger resize events etc etc.
getZoom: function() {
return zoom;
},
setZoom: function(value) {
map.setZoom(zoom);
}
};
});
这个问题有angularjs标记,所以我认为这是一个Angular JS应用程序。在这种情况下,您可能不应该在页面控制器中执行此操作。
您可以使用预先存在的指令,如https://angular-ui.github.io/angular-google-maps/#!/或者你可以自己写指令。
如果您编写自己的指令,那么每次使用$scope.on('$destroy',fn)事件销毁指令时,都应该销毁googlemap实例。像这样。。
$scope.on('$destroy', function(){
mapInstance = null;
})
每次呼叫:
map = new google.maps.Map(document.getElementById('xx'), mapOptions);
你消耗了你的谷歌地图配额。小心!
在我的案例中,帮助谷歌地图的超时重新初始化解决了这个问题。
setTimeout(function(){ initialize() }, 30);
通过销毁先前动态创建的元素可以杀死初始化的实例,但这更难。。。
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭()不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 谷歌地图API标记没有标记我的位置
- 使用谷歌地图api 3为MapTypeId.TERRAIN分离按钮
- 在JQuery中使用谷歌地图Api事件/侦听器
- 在Ionic应用程序上使用$.getScript加载谷歌地图Api
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API)
- 谷歌地图API-显示具有不同图标的标记
- 如何停止地图移动时,鼠标悬停在标记在谷歌地图API 3