javascript - 在一页上渲染同一张谷歌地图两次

Question

我正在开发一个使用 CSS“制表符”分隔表单的 Rails 应用程序。我需要在两个选项卡中呈现相同的谷歌地图，但 map 仅附加到第一个 #map_canvas div。我目前拥有的:

# form.html.erb

<div class='tabs'>
  <div id='tab1'>
    <div class="map container">
      <div id="map_canvas"></div>
    </div>
  </div>
  <div id='tab2'>
    <div class="map container">
      <div id="map_canvas"></div>
    </div>
  </div>
</div>

# map.js

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

我的第一次尝试是局部渲染 map ，并引用两次，但效果相同。

有没有办法正确地做到这一点？

Answer 1

一个id在一个页面中应该是唯一的，你已经在页面中使用了'map_canvas'两次。您可以尝试使用类而不是使用 Id

 <div class='tabs'>
  <div id='tab1'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
  <div id='tab2'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
</div>

#js
 map = new google.maps.Map(document.getElementsByClassName("map_canvas"),mapOptions);