如何重新连接谷歌地图对象到DOM

Question

我不确定这篇文章的正确术语是什么，所以如果有必要的话，请随意编辑这篇文章的标题。

基本上，我正在创建一个谷歌地图对象，并添加一堆覆盖，标记等。下面是我创建地图的方法:

map = new google.maps.Map(document.getElementById("map"), mapOptions)

但是，在一边导航时，我可能会到达一个url，其中地图DOM元素被销毁了，但地图对象仍然存在于我的web应用程序中。当我回到显示地图的url时，我想将地图重新附加到DOM元素，而不是重新创建地图。

有什么办法吗?

编辑:

更具体地说，我在地图上有一堆标记和叠加

Map = 
  map: null
  markers:[]
  icons: {}

  init: ->
    mapOptions = 
      center: new google.maps.LatLng(34.0500, -118.2500)
      zoom: 9
    @map = new google.maps.Map(document.getElementById("map"), mapOptions)
    @icons.default = 
      path: google.maps.SymbolPath.CIRCLE
      strokeColor: '#DD0000'
      fillColor: '#DD0000'
      fillOpacity: 0.6
      scale:8
      strokeWeight: 2
  addMarker: (post) ->
    gLatLng = new google.maps.LatLng post.location.lat, post.location.lng
    gMarker = new google.maps.Marker
      position: gLatLng
      map: @map
      icon: @icons.default
      animation: google.maps.Animation.DROP
    marker =
      post: post
      gMarker: gMarker
    @markers.push marker

我想我可以创建一个新的地图，并将所有的标记附加到新的地图，但这似乎是不必要的，因为我可能有许多其他叠加在地图上

Answer 1

在创建了Map对象之后，不可能将Map对象附加到另一个DOM元素。正如你在Google Maps Javascript API v3参考中看到的，只有getDiv()方法在Map上可用，而不是一个setDiv()。

我认为你可以坚持其他对象，如Marker和MapOptions重建Map，但Map对象本身是无用的，没有相应的DOM元素。

Answer 2

您可以创建一个全局变量mapOptions，在其中存储地图的选项。当与地图进行交互时，您可以更新mapOptions对象，并将其保存到本地存储中。

var mapOptions = {
   ...
};
localStorage.setItem("mapOptions", JSON.stringify(mapOptions));
map = new google.maps.Map(document.getElementById("map"), localStorage.getItem("mapOptions")); 

希望这对你有帮助!