Google Maps JavaScript API-图层排序 [英] Google Maps JavaScript API - Layer Ordering

问题描述

我有一张地图，可从GeoJSON加载建筑轮廓线.我的地图也使用街景视图.与所有Google Maps一样，街景视图通过Pegman访问.单击并拖动衣夹人"时，我的地图上的几何位于街景视图"几何中的几何上方.

我想知道如何或什至有可能将街景视图图层放置在数据层(具有GeoJSON形状的图层)上方，以使街景视图中的街道，路径和360度几何图形位于上方 GeoJSON建筑占地面积几何图形.

我已经仔细搜索过Google Maps JavaScript API文档，并进行了大量Google搜索，但找不到像使用OpenLayers和Leaflet那样对图层进行重新排序的事情.

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

解决方案

@ Dr.Molle在此相关问题中有一个覆盖两个地图的示例:

代码段:

  function initMap(){let map = new google.maps.Map(document.getElementById("map")，{变焦:16中央: {纬度:40.7127753，lng:-74.0159728}，});让map2 = new google.maps.Map(document.getElementById('map2')，{mapTypeControl:否，backgroundColor:'hsla(0，0％，0％，0)'，缩放:map.getZoom()，样式:[{样式师":[{可见性":关闭"}]}，{"elementType":标签"，样式师":[{可见性":上"}]}]，中心:map.getCenter()，mapTypeId:google.maps.MapTypeId.ROADMAP});map.bindTo('center'，map2，'center');map.bindTo('zoom'，map2，'zoom');//加载GeoJSON.map.data.addGeoJson(JSON.parse(geoJson));//设置笔触宽度，并为每个多边形填充颜色map.data.setStyle({fillColor:绿色"，fillOpacity:1.0，重量:1，});}var geoJson ='{"type":"FeatureCollection"，"features":[{"type":"Feature"，"geometry":{"type":"Polygon"，"coordinates":[[[-74.01384776566772，40.71283222634755]，[-74.01206677888183,40.71205151790942]，[-74.0127105090454,40.71035995155685]，[-74.01331132386474,40.71035995155685]，[-74.01365464661865,40.71009970676538]，[-74.01442712281494,40.7103762121682256:{}}，{" type:"特征，"几何:{" type:"多边形，"坐标:[[[-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]]]}，属性":{}

 /*始终明确设置地图高度以定义div的大小*包含地图的元素.*/#地图 {高度:100％;}/*可选:使示例页面填充窗口.*/html，身体 {高度:100％;边距:0;填充:0;}.地图 {宽度:100％;高度:100％;背景:透明！重要；}  

 <！DOCTYPE html>< html>< head>< title>数据层:样式</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=每周一次"推迟></script><！-jsFiddle将插入css和js-></head><身体>< div id ="map" class ="map"></div>< div id ="map2" class ="map" style ="top:-100％;"></div></body></html>  

I have a map that loads building footprints from GeoJSON. My map also uses Street View. Like all Google Maps, Street View is accessed via Pegman. When you click and drag Pegman, the geometries on my map are above the geometries from the Street View geometries.

I would like to know how, or if it's even possible, to place the Street View layer above the Data layer (the layer with GeoJSON shapes) so street, path, and 360 geometries from Street View are above the GeoJSON building footprint geometries.

I've scoured the Google Maps JavaScript API documentation and made numerous Google Searches and cannot find a thing about re-ordering layers as you can with OpenLayers and Leaflet.

Here is a screenshot of the issue. You can see a path and a 360 panorama partially covered by the GeoJSON geometry.

解决方案

@Dr.Molle has an example of overlaying two maps in this related question: How to put Google Map labels on top?

If you do that and put the GeoJSON data on the lower map, the StreetView layer will be on top of the 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

code snippet:

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>

这篇关于Google Maps JavaScript API-图层排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！