javascript – 在单页应用程序上重用Google Maps API实例

前端之家收集整理的这篇文章主要介绍了javascript – 在单页应用程序上重用Google Maps API实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有一个单页应用程序(Angular JS应用程序),并在元素id googleMap上绘制一个Google Map实例 –
var mapInstance = new google.maps.Map(document.getElementById(`googleMap`),mapOption)

然后我浏览应用程序路由,由此,销毁googleMap DOM元素,最后我回到带有这个元素的路线,现在我必须在这个元素上重新绘制地图.

重绘地图的正确方法是什么?

正如我在this answer中读到的那样,我不必重新创建它,而是使用相同的实例.

解决方法

这个问题有angularjs标签,所以我假设这是一个Angular JS应用程序.在这种情况下,您可能不应该在页面控制器中执行此操作.

您可以使用像https://angular-ui.github.io/angular-google-maps/#!/这样的预先存在的指令,也可以编写自己的指令.

如果您编写自己的指令,那么每次使用$scope.on(‘$destroy’,fn)事件销毁指令时,都应该销毁google地图实例.像这样..

$scope.on('$destroy',function(){
    mapInstance = null;
})

猜你在找的JavaScript相关文章