假设我有一个单页应用程序(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; })