Javascript 如何将GoogleMaps对象重新附加到DOM？

我不确定这篇文章的行话是否正确，所以如果有必要，请随意编辑这篇文章的标题

基本上，我正在创建一个Google地图对象，并添加一组覆盖图、标记等。这就是我创建地图的方式：

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

但是，在侧边导航时，我可能会找到一个url，其中MapDOM元素被销毁，但map对象仍然存在于我的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

---

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

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

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

var mapOptions = {
   ...
};

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

---

希望这有帮助

创建

Map

对象后，无法将

Map

对象附加到另一个DOM元素。正如您在中所看到的，

Map

上只有一个

getDiv（）

方法可用，不是

setDiv（）

---

我认为您可以保留其他对象，如

标记

和

映射选项

，以重新创建

映射

，但是

映射

对象本身在没有相应的DOM元素的情况下是无用的。

我在Vue应用程序中使用了这种方法。我将渲染的贴图存储在Vuex状态，并使用此方法将贴图“重新绑定”到文档。@Nathangersea您还记得您是如何做到这一点的吗？此答案使用存储的选项重新创建贴图对象。您将渲染的贴图存储在vuex中，但我看不到将div重新绑定到该贴图的方法。@JackleeMerdeur，是的，我在模板中使用了ref属性，然后使用了watcher。这是否足以让你克服它？@NatchanAgersea。我知道如何使用vuex和watchers。我好奇的是如何将内部映射对象重新绑定到一个新的div，正如mwijnands指出的那样，这是不可能的。无论如何，谢谢你，不过别提我的问题。在我的应用程序中，我永远不会离开地图页面，也不会继续使用同一个地图对象。