我正在使用带有风格化地图的 Google Maps API,并且在我的网站上有一个选项可以显示或隐藏兴趣点。默认情况下,POI 处于打开状态。当用户单击“隐藏”按钮时,我希望地图关闭 POI,但保留其余的主题样式设置。
我知道 Map.setOptions 函数,但是当我这样使用它时:
map.setOptions({styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]});
它会覆盖所有现有主题的设置,恢复到默认的谷歌地图外观,但关闭 POI。有没有办法只关闭 POI 并保持当前主题?
地图是一个 MVC 对象,它的所有“选项”都有 setter 和 getter。
这对我有用(但它涉及知道隐藏 POI 的条目是数组中的第一个):
// Apply new JSON when the user chooses to hide/show features.
document.getElementById('hide-poi').addEventListener('click', function() {
var styles = map.get("styles");
styles.splice(0, 0, {
featureType: 'poi',
stylers: [{
visibility: 'off'
}]
});
map.set("styles", styles);
});
document.getElementById('show-poi').addEventListener('click', function() {
var styles = map.get("styles");
styles = styles.slice(1);
map.set("styles", styles);
});
代码片段:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.86,
lng: 151.209
},
zoom: 13,
mapTypeControl: false,
styles: nightMode
});
// Add controls to the map, allowing users to hide/show features.
var styleControl = document.getElementById('style-selector-control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
// Apply new JSON when the user chooses to hide/show features.
document.getElementById('hide-poi').addEventListener('click', function() {
var styles = map.get("styles");
styles.splice(0, 0, {
featureType: 'poi',
stylers: [{
visibility: 'off'
}]
});
map.set("styles", styles);
});
document.getElementById('show-poi').addEventListener('click', function() {
var styles = map.get("styles");
styles = styles.slice(1);
map.set("styles", styles);
});
}
var map;
var nightMode = [{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
},
{
elementType: 'geometry',
stylers: [{
color: '#242f3e'
}]
},
{
elementType: 'labels.text.stroke',
stylers: [{
color: '#242f3e'
}]
},
{
elementType: 'labels.text.fill',
stylers: [{
color: '#746855'
}]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{
color: '#263c3f'
}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#6b9a76'
}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#38414e'
}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
color: '#212a37'
}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{
color: '#9ca5b3'
}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#746855'
}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#1f2835'
}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{
color: '#f3d19c'
}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{
color: '#2f3948'
}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{
color: '#17263c'
}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#515c6d'
}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{
color: '#17263c'
}]
}
];
/* 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-control {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
font-family: 'Roboto', 'sans-serif';
margin: 10px;
padding-right: 5px;
/* Hide the control initially, to prevent it from appearing
before the map loads. */
display: none;
}
/* Display the control once it is inside the map. */
#map .map-control {
display: block;
}
.selector-control {
font-size: 14px;
line-height: 30px;
vertical-align: baseline;
}
<div id="style-selector-control" class="map-control">
<input type="radio" name="show-hide" id="hide-poi" class="selector-control">
<label for="hide-poi">Hide</label>
<input type="radio" name="show-hide" id="show-poi" class="selector-control" checked="checked">
<label for="show-poi">Show</label>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句