javascript - 获取 map google div 中的 DOM 元素

Question

当我初始化 Google map 时，可以从“childDiv”id 获取模板文本吗？我的代码如下所示:

function initialize() {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());

#map {
  height: 450px;
  width: 450px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map">
  <div id="childDiv">testes</div>
</div>

当我在初始化 map 函数后调试此代码时，我的 childDiv 消失了。

<小时/>

Jsfiddle:https://jsfiddle.net/ce4bpzhh/

Answer 1

这是谷歌地图的默认工作方式。它将覆盖您为其指定的 div 的内容。

但是，有一个选项可以告诉它保留现有内容。

该选项为noClear，您必须将其设置为true。

<小时/>

来自关于 mapOptions 的 Google map 文档

noClear - Type: boolean
If true, do not clear the contents of the Map div.

<小时/>

工作示例

function initialize() {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    noClear:true // ADD THIS OPTION
  };
  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());

#map {
  height: 450px;
  width: 450px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map">
  <div id="childDiv">testes</div>
</div>