google-maps - 如何在无法平移的Google Maps API v3中创建文本叠加层？

Question

我正在使用Google Maps API v3。我想在平移 map 时不会移动的 map 上创建文本叠加层。是从MapPanes对象访问可操作DOM元素的最佳方法，还是最好创建一个自定义控件，即使该控件除了显示文本外也不会做其他事情？

Answer 1

我发现最适合我的方法是在创建新 map 后添加了几行JavaScript。因此，在此之后:

map = new google.maps.Map('myMapDivId', mapOptions);

添加以下内容:

var myTitle = document.createElement('h1');
myTitle.style.color = 'white';
myTitle.innerHTML = 'Hello World';
var myTextDiv = document.createElement('div');
myTextDiv.appendChild(myTitle);

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv);

您可能需要设置文本样式以使其看起来更好。

一种替代方法是将div放入HTML中:

<div id="myTextDiv" style="color: white; position: absolute;">
    <h1>Hello World</h1>
</div>

然后在您的JavaScript中执行以下操作:

var myControl = document.getElementById('myTextDiv');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);

注意一个重要的区别:如果使用HTML路由定义div，则必须在HTML中将位置样式设置为绝对，以避免呈现问题。