Google Maps JavaScript API - 图层排序答案

【问题标题】：Google Maps JavaScript API - Layer OrderingGoogle Maps JavaScript API - 图层排序
【发布时间】：2021-03-06 12:24:30
【问题描述】：

我有一张从 GeoJSON 加载建筑足迹的地图。我的地图也使用街景。像所有谷歌地图一样，街景是通过街景小人访问的。当您单击并拖动街景小人时，我地图上的几何图形位于街景几何图形的上方。

我想知道如何将 Street View 图层放置在 Data 图层（具有 GeoJSON 形状的图层）上方，或者是否有可能，以便街景视图中的街道、路径和 360 度几何图形在上方 GeoJSON 建筑足迹几何。

我搜索了 Google Maps JavaScript API 文档并进行了多次 Google 搜索，但找不到像使用 OpenLayers 和 Leaflet 那样重新排序图层的内容。

这是问题的屏幕截图。您可以看到 GeoJSON 几何图形部分覆盖的路径和 360 度全景。

【问题讨论】：

你应该打开一个功能请求：issuetracker.google.com/…
你能添加一个带有小例子的sn-p来重现这个问题吗？这可能会吸引更多人提供帮助

标签： javascript google-maps google-maps-api-3 maps

【解决方案1】：

@Dr.Molle 在这个相关问题中有一个叠加两张地图的例子：How to put Google Map labels on top?

如果您这样做并将 GeoJSON 数据放在下方地图上，StreetView 图层将位于 GeoJSON 之上。

  let map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 40.7127753,
      lng: -74.0159728
    },
  });
  let map2 = new google.maps.Map(document.getElementById('map2'), {
    mapTypeControl: false,
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
    zoom: map.getZoom(),
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }]
    }],
    center: map.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.bindTo('center', map2, 'center');
  map.bindTo('zoom', map2, 'zoom');

CSS：

.map {
        width: 100%;
        height: 100%; 
        background:transparent !important;
    }

proof of concept fiddle

代码 sn-p：

function initMap() {
  let map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 40.7127753,
      lng: -74.0159728
    },
  });
  let map2 = new google.maps.Map(document.getElementById('map2'), {
    mapTypeControl: false,
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
    zoom: map.getZoom(),
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }]
    }],
    center: map.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.bindTo('center', map2, 'center');
  map.bindTo('zoom', map2, 'zoom');
  // Load GeoJSON.
  map.data.addGeoJson(JSON.parse(geoJson));
  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: "green",
    fillOpacity: 1.0,
    strokeWeight: 1,
  });
}
var geoJson = '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01384776566772,40.71283222634755],[-74.01206677888183,40.71205151790942],[-74.0127105090454,40.71019729868139],[-74.01331132386474,40.71035995155685],[-74.01365464661865,40.71009970676538],[-74.01442712281494,40.71037621682256],[-74.01384776566772,40.71283222634755]]]},"properties":{}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01672381852416,40.71865472137034],[-74.01286143754271,40.718248139094314],[-74.01485700104979,40.71120574010474],[-74.01661653016356,40.711953928711026],[-74.01631612275389,40.71348280971995],[-74.0174533793762,40.71362919010266],[-74.01672381852416,40.71865472137034]]]},"properties":{}}]}'

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Styling</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map" class="map"></div>
  <div id="map2" class="map" style="top:-100%;"></div>
</body>

</html>

【讨论】：