谷歌地图：如何在我的叠加层上绘制标签（国家、城市名称等）答案

【问题标题】：Google Maps: How to draw labels (country, city names, etc.) over my overlay谷歌地图：如何在我的叠加层上绘制标签（国家、城市名称等）
【发布时间】：2016-10-25 01:25:15
【问题描述】：

我需要在谷歌地图上绘制一些图形。图形并不总是透明的，所以我想在我的图形上绘制文本标签（国家名称、城市名称等）。

对于我使用 overlay map type 的图形，它显示在底图上。但是我没有在上面画标签？

我猜应该有一种方法可以使用不同的样式设置绘制两次基本地图（所以我设置了不带标签的地图样式，放置了我的叠加层，然后只放置了带有标签的路线图的叠加层），但似乎没有就像我可以使用基本地图类型作为覆盖的一样。我看到的另一种方法是仅通过编写 URL 手动获取带有标签的图块。这可行，但据我了解，ToS 禁止直接访问地图图块。

是否有可行且合法的方式来做到这一点？

这里是说明 URL 组合解决方案的 jsfiddle：https://jsfiddle.net/GRaAL/jyr81p2c/

// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
    return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

我发现StyledMapType 可以用作覆盖地图类型（具有相同的接口），所以我创建了StyledMapType 仅带有标签，而不是在地图类型注册表中注册它只是将其添加为覆盖，这样：

var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);

完整的工作示例在这里：https://jsfiddle.net/GRaAL/jyr81p2c/2/

【讨论】：

【解决方案2】：

您可能想查看MapLabel for Google Maps V3:

此库允许在特定位置将文本添加到地图中。请注意，用户的浏览器必须支持 Canvas 才能显示标签。

MapLabel 类

这个类扩展了OverlayView。

请注意，要显示的标签需要浏览器 <canvas> 支持。分析

来源：

https://github.com/googlemaps/js-map-label

How to add text label in Google Map API

希望对你有帮助

【讨论】：

感谢您的建议，但我需要现有的谷歌地图标签（国家、城市、海洋等的名称）。