在单页应用程序上重复使用Google Maps 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元素，最后我回来了到这个元素的路由，现在我不得不在这个元素上重新绘制地图。

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

当我在这个答案中阅读时，我没有重新创建它，但使用相同的实例。

解决方案

这个问题有angularjs标签，所以我认为这是一个Angular JS应用程序。在这种情况下，你应该不应该在你的页面控制器中这样做。

您可以使用预先存在的指令，如 https://angular-ui.github.io/angular-google-maps/#!/ 或者您可以编写自己的指令。

如果您编写自己的指令，那么每次使用$ scope.on（'$ destroy'，fn）事件销毁指令时，您应该销毁google map实例。像这样..

$ $ $ $ $ $ $ $ $ $ $ $ $ map $ =
}）

Suppose I have a Single Page Application (Angular JS application) , and I draw a Google Map instance on an element id googleMap -

var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption)

then I navigate through the application routing , due this , destroying the googleMap DOM element , and finally I back to the route with this element , now I have to re-draw the map on this element .

What is the correct way to redraw the map ?

As I read in this answer I don't have to re-create it , but use the same instance .

解决方案

This question has the angularjs tag so I assume this is an Angular JS application. In which case, you should probably shouldn't be doing this in your page controller.

You could use a pre-existing directive like https://angular-ui.github.io/angular-google-maps/#!/ or you could write your own directive.

If you write your own directive then you should destroy the google map instance each time the directive is destroyed using the $scope.on('$destroy', fn) event. Like this..

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

这篇关于在单页应用程序上重复使用Google Maps API的实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！