gpt4 book ai didi

javascript - Google Maps JavaScript API - 图层排序

转载 作者:行者123 更新时间:2023-12-03 14:46:41 30 4
gpt4 key购买 nike

我有一张从 GeoJSON 加载建筑足迹的 map 。我的 map 也使用街景。像所有谷歌地图一样,街景是通过街景小人访问的。当您单击并拖动街景小人时,我的 map 上的几何图形位于街景几何图形的上方。
我想知道如何将 Street View 图层放置在 Data 图层(具有 GeoJSON 形状的图层)之上,这样街景 View 中的街道、路径和 360 度几何图形是 以上 GeoJSON 建筑足迹几何。
我搜索了 Google Maps JavaScript API 文档并进行了无数次 Google 搜索,但找不到像使用 OpenLayers 和 Leaflet 那样重新排序图层的内容。
这是该问题的屏幕截图。您可以看到 GeoJSON 几何图形部分覆盖的路径和 360 度全景图。
enter image description here

最佳答案

@Dr.Molle 在这个相关问题中有一个叠加两张 map 的例子:How to put Google Map labels on top?
如果您这样做并将 GeoJSON 数据放在下方 map 上,则 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
screenshot of resulting map
代码片段:

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>

关于javascript - Google Maps JavaScript API - 图层排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64974326/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com