Google Maps JavaScript API - 图层排序

Question

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

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

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

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

Answer 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;
    }

概念证明小提琴

代码片段：

  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');

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

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":{}}]}'