javascript - 具有多个图层的自定义 map 类型

Question

我正在使用谷歌地图v3 javascript api，并且我尝试根据google.develper上的指南创建自定义 map 类型.

但是我发现 map 类型仅提供一层，而我的自定义 map 类型应提供两层，就像包含两层的 google.maps.MapTypeId.HYBRID - SATELLITE 和地名。

所以我想知道这是否可能？

BWT，我有关于 map 类型和图层的问题here .

似乎 map 类型是由图层组成的，这是真的吗？

<小时/>

事实上，我的第一个问题已经由 Michael Geary 解决了。

但是，我现在遇到了新问题，因为它仍然与自定义 map 类型相关，所以我更新这篇文章而不是创建新问题。

第二季度:

如果我有多个图层，那么 map 类型控件怎么样？

如您所见，google.maps.mapTypeId.HYBRID 有两层——卫星层和标签层。

所以在 map 类型控件中你会发现:

注意标签复选框。

现在我的自定义 map 类型有两个图层 - base 和 labels，如何使 labels 图层可以切换？

Answer 1

自定义 map 类型为每个图 block 定义一个 DOM 元素，as described here 。该 DOM 元素不仅限于单个图像。您可以拥有<div>其中嵌套有任意数量的图像和其他元素。

混合 map 类型就是通过这种方法实现的。以下是 Chrome DOM 检查器的屏幕截图，显示混合卫星 View 中的单个 map 图 block :

如您所见，<div>有两个 <img> children 。第一个，由 khms0.googleapis.com 提供，是基础卫星图 block 图像。第二个，由 mts0.googleapis.com 提供，是标签和边框覆盖具有透明背景的图 block 。就 Maps API 而言，这只是单一 map 类型:API 只了解容器 <div> ，而不是其中的图像。

base map example在 Base Map Types文档的部分说明了 <div> 的使用元素作为 map 图 block 。您可以使用它作为起点并添加您的 <img> <div>内的瓷砖.