google-maps - 自定义叠加地图类型和 mapTypeControl

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: Customizing the MapTypeControl for separate map overlays

编辑： 我在下面发布了我当前解决方案的 jsFiddl。

score 5 · Accepted Answer

好吧，看起来没有本地方法，将覆盖地图类型绑定到基本地图类型或使用谷歌地图类型控件进行覆盖地图类型。

所以这是我最终所做的，以解决这个问题：http: //jsfiddle.net/lejared/720L7wu0/3/

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

我已经构建了一个自定义控件（具有原生 Google 地图控件的外观）。此控件切换我的叠加地图类型（山体阴影）。您可以定义适合此叠加地图类型的基本地图类型数组。如果选择了合适的底图类型，则控件将自动显示/隐藏自身。

2017-02-01: Updates fiddle to match new native look of googles map controls.

score 2 · Accepted Answer

你的问题有两个部分：

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

score 1 · Accepted Answer

问题 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

编辑：

您是否尝试过将 google 路线图类型添加为自己的基础层，这样您就可以像本例中一样给它自己的名称（查看右上角的选择）：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';

..如果这已经创建为基础层选择，则可能在某个地方隐藏了该复选框选项。那些复选框的东西必须总是覆盖地图选择切换。

google-maps - 自定义叠加地图类型和 mapTypeControl

3 回答 3

Related

Reference