Google地图：如何在我的叠加层上绘制标签（国家/地区，城市名称等）

Question

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

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

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

有没有一种有效的，合法的方式来做到这一点？

这是jsfiddle，它说明了URL组合解决方案：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";
}

Answer 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/

Answer 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

希望这有帮助