Google地图：如何在覆盖图上绘制标签（国家，城市名称等） [英] Google Maps: How to draw labels (country, city names, etc.) over my overlay

问题描述

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

I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.

对于图形，我使用叠加地图类型，它显示在基本地图上。但是我没有在它上面画标签？

For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?

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

I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.

有没有一种合理的方法可以做到这一点？

Is there a working and, well, legal way to do that?

下面是说明URL合成解决方案的jsfiddle： https：// jsfiddle .net / GRaAL / jyr81p2c /

Here is jsfiddle which illustrates URL composing solution: 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";
}

推荐答案

$ c> StyledMapType 可以用作覆盖地图类型（具有相同的接口），所以我创建了 StyledMapType 并且仅使用了标签，而不是将其注册到

I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:

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/

Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/

这篇关于Google地图：如何在覆盖图上绘制标签（国家，城市名称等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！