堆叠地图样式(谷歌地图API)

Question

所以我找不到答案，但我知道这是可能的，因为我见过它。

我正在尝试在自定义样式地图上切换特定的样式选项，而无需重新初始化地图并丢失任何删除的图钉或搜索的位置。

例如，关闭和打开道路标签。我以一种笨拙的方式完成了这一点，我创建了两个完整的样式对象，并使用map.setMapTypeId在它们之间切换。

这样做的问题是 a( 它非常重复，b( 我有很多我希望能够切换的选项，所以必须为我的可切换选项的每个变体制作样式表是不现实的。

现实的解决方案是能够将对象连接到我的样式选项，而无需完全撤消以前的样式选项。

例如

{
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{'color': '#eaeaea'}]
}

然后连接此样式：

{
'featureType': 'all',
'elementType': 'labels',
'stylers': [{'visibility': 'off'}]
}

我不能只更改原始对象，因为在重新加载地图之前，样式不会采用，从而导致我丢失标记和地图位置。

我需要它来运行类似于map.setMapTypeId('styled_map', 'styled_map_2');，我的样式只是编译的。

希望我已经弄清楚了困境。

Answer 1

一种方法是如本文所述 寻找在地图上隐藏或显示街道的正确方法

这是如果您只需要打开和关闭元素的可见性。

如果您需要比这更大的灵活性，基于与上述相同的想法以及我在第一条评论中提到的内容，您可以拥有更大的灵活性。这是一个使用复选框和数据属性来更改内容的快速 POC。

var map;
function initialize() {
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$('input').change(changeStyles);
changeStyles();
}
function changeStyles() {
// Empty styles array
var styles = [];
// Loop through all checkboxes
$('input:checkbox').each(function(i, el) {
// If the checkbox is checked, we use it
if ($(el).prop('checked')) {
// Create the style object
var style = {
"featureType": $(el).data('feature-type'),
"elementType": $(el).data('element-type'),
"stylers": []
};
// Split the data-stylers value to get our stylers object key and value
var values = $(el).data('stylers').split(':');
var ob = {};
// Use our data key and value
ob[values[0]] = values[1];
// Push the styler
style.stylers.push(ob);
// Push the style
styles.push(style);
}
});
// Set the map style
map.setOptions({
styles: styles
});
}
initialize();

#map-canvas {
height: 150px;
}

<div id="map-canvas"></div>
<input type="checkbox" data-feature-type="water" data-element-type="geometry.fill" data-stylers="color:#1cb9ff"> Change Water Color
<input type="checkbox" checked data-feature-type="all" data-element-type="labels.text" data-stylers="visibility:off"> Hide labels
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

代码是注释的，因此应该很容易理解这个概念。显然，如果您需要使用一个复选框更改多个选项，则需要对其进行一些扩展。

Answer 2

// create a variable for the element you want an option for
var styleOptionCityLabels = {
featureType: 'administrative',
elementType: 'labels',
stylers: [{'visibility': 'on'}]
};
// create a variable for your map styles that pulls any option variables you have
var mapStyle = [styleOptionCityLabels];
// get the checkbox element you want to control your toggle
var cityCheck = $('#city-labels-checkbox');
// apply a click listener to the box
cityCheck.on('click', function(){
// check if the box is checked
if ($(cityCheck).is(':checked')) {
// change the desired style
styleOptionCityLabels.stylers = [{'visibility': 'on'}];
} else {
// change the desired style
styleOptionCityLabels.stylers = [{'visibility': 'off'}];
}
// call the setOptions method to reload the altered styles
map.setOptions({styles: mapStyle}); 
});