Question

我已成功将OSM作为新的基本地图类型添加到我的Google Maps API应用程序中。

接下来，我添加了一个新的叠加层地图类型，它将山形阴影添加到地图中。有关https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#OverlayMapTypes上叠加地图类型的文档说明了：

“[...]您可以将地图类型添加到现有的MapType [...]”

“叠加地图类型将显示在它们所附加的任何基本地图的顶部。”

和“以下示例与前一个示例完全相同，只是我们在ROADMAP地图类型之上创建了一个平铺覆盖MapType：”

但是在代码示例中，叠加层地图类型始终显示在您选择的地图类型上。

如何让我的山体阴影叠加地图类型仅显示在地图类型“路线图”和我的自定义“OSM”地图类型上？ 编辑：更确切地说：实际上我想知道，如果有办法像上面的文档那样自动执行此操作。我知道，如何通过监听maptypeid_changed事件手动完成此操作。
有没有办法将我的叠加地图类型添加到mapTypeControl作为复选框，就像在默认卫星地图类型上使用“标签”或路线图地图类型中的“地形”一样？ 编辑：直到几天前，上面的官方文档提出了一种方法来做到这一点，但没有完全描述它，并且链接的示例被破坏了（404-link）。您的用户在此处发现了同样的问题：Google maps api: Customising the MapTypeControl for separate map overlays

修改我在下面发布了当前解决方案的jsFiddl。

Answer 1

好吧，看起来没有本地方式，将叠加地图类型绑定到基本地图类型或使用谷歌地图类型控制覆盖地图类型。

以下是我最终完成的工作，以解决此问题： http://jsfiddle.net/lejared/720L7wu0/3/

var ReliefCtrl = {/* see fiddle */};

我已经构建了一个自定义控件（看起来感觉是本机Google地图控件）。此控件切换我的叠加地图类型（山体阴影）。您可以定义适合此叠加层类型的基本地图类型数组。如果选择了合适的基本地图类型，控件将自动显示/隐藏自身。

2017-02-01：更新小提琴以匹配谷歌地图控件的新原生外观。

Answer 2

您的问题分为两部分：

要仅在某些地图类型处于活动状态时自动显示自定义叠加层，您需要收听maptypeid_changed对象上的map事件。您必须在该事件监听器中添加/删除叠加层。
目前没有办法以分层方式将自己的叠加层/地图类型添加到默认的地图类型控件中。有关详细信息，请参阅并解决此问题：http://code.google.com/p/gmaps-api-issues/issues/detail?id=2490

Answer 3

问题1。）我创建了一个示例，选择ROADMAP，您可以查看特定的overlayMapType（并将其隐藏在其他模式中），复制并粘贴到您的test.html，查看和欣赏！希望您可以编辑它以满足您的需求：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Overlay MapTypes</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>

      function CoordMapType(tileSize) {
        this.tileSize = tileSize;
      }

      CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
        var div = ownerDocument.createElement('div');
        div.innerHTML = coord;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;
      };

      var map;
      var chicago = new google.maps.LatLng(41.850033,-87.6500523);

      function initialize() {
        var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

        map = new google.maps.Map(document.getElementById('map_canvas'),
                                          mapOptions);

        // Insert this overlay map type as the first overlay map type at
        // position 0. Note that all overlay map types appear on top of
        // their parent base map.
        map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

        // we check mapType when it is changing
        google.maps.event.addListener( map, "maptypeid_changed", function( evnt ) {
            if(map.mapTypeId === "roadmap") {
                // show my custom map layer - but only if its not already there
                // note: you could also check more specifily your map type here
                if(map.overlayMapTypes.getLength() == 0) {
                    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
                }
            } else {
                // if something else, remove it 
                // note: you could also check more specifily your map type here, but for now
                // we just check if something is already there
                if (map.overlayMapTypes.getLength() > 0){
                    map.overlayMapTypes.removeAt(0);
                }
            }
        });     

      }

    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 640px; height: 480px;">map div</div>
  </body>
</html>

问题2。）尝试过，但这是不可能的（高度保护），而是使用谷歌自定义地图控件 - 这似乎只是选项:(

https://developers.google.com/maps/documentation/javascript/controls#CustomControls

修改

您是否尝试过将谷歌路线图类型添加为自己的基础图层，以便您可以像在此示例中一样给出自己的名称（查看右上角选项）：https://google-developers.appspot.com/maps/documentation/javascript/examples/maptype-base?hl=fi然后您将添加叠加地图（就像在我的示例）在谷歌地图上显示CoordMapType网格（或您想要的叠加地图）。这样您就不会获得该复选框，但至少您可以使用自己的选择和名称在普通的谷歌地图控制器中查看它？我现在没有时间来测试这个理论，因为我在工作中大声笑。：）

但基本上你可以完成下拉的地方

地图（谷歌路线图）

我的图层（谷歌路线图，它上面的叠加图，或几个）？

或者你可以尝试使用console.log（map）;并尝试找到更多方法而不仅仅是：

CoordMapType.prototype.name = 'My base layer'; CoordMapType.prototype.alt = 'My base layer map type';

..如果已经创建了一个基本图层选项，可能会隐藏复选框选项。这些复选框内容必须始终是叠加地图选择切换。

Answer 4

This example可能会提供您需要的答案。可以使用任何地图类型顶部的复选框打开和关闭两个自定义叠加层。

基础.js文件（MCustomTileLayer.js和MTileLayerControl_v3.js）可以免费使用。

请不要热链接并将它们保存到您自己的服务器上。

自定义叠加贴图类型和mapTypeControl

4 个答案: