Javascript 堆叠地图样式（谷歌地图API）

所以我找不到答案，但我知道这是可能的，因为我已经看到了

我正在尝试在自定义样式的地图上切换特定的样式选项，而不必重新初始化地图，也不会丢失任何丢失的PIN或搜索的位置

例如，关闭和打开道路标签。我已经用一种很有技巧的方式完成了这项工作，我创建了两个完整的样式对象，并使用

map.setMapTypeId

在它们之间切换

问题是a）这是非常重复的，b）我有很多选项想要切换，所以必须为我的切换选项的每一个变体制作样式表是不现实的

现实的解决方案是能够将对象集中到“我的样式”选项上，而无需完全撤消以前的样式选项

e、 g

然后连接此样式：

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

我不能仅仅改变原始对象，因为在重新加载贴图之前，样式不会生效，这会导致我丢失标记和贴图位置

我需要它的功能类似于

map.setMapTypeId（'styled_-map'，'styled_-map_-2'）我的样式刚刚编译的地方

希望我已经清楚地说明了这个困境。
一种方法就是在这篇文章中解释

如果只需要打开和关闭图元的可见性，则会出现这种情况

如果你需要更多的灵活性，基于上述相同的想法和我在第一次评论中提到的，你可以有更多的灵活性。下面是一个快速POC，它使用复选框和数据属性来更改周围的内容


var映射；
函数初始化（）{
var mylatng=newgoogle.maps.LatLng（46.2,6.17）；
变量映射选项={
缩放：4，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
$（'input'）.change（changeStyles）；
改变风格（）；
}
函数changeStyles（）{
//空样式数组
var样式=[]；
//循环检查所有复选框
$（'input:checkbox'）。每个（函数（i，el）{
//如果选中该复选框，我们将使用它
如果（$（el）.prop（'checked'））{
//创建样式对象
变量样式={
“featureType”：$（el）.data（'feature-type'），
“elementType”：$（el）.data（'element-type'），
“样式器”：[]
};
//拆分数据样式器值以获得样式器对象键和值
var值=$（el）.data（'stylers'）.split（'：'）；
var ob={}；
//使用我们的数据键和值
ob[值[0]]=值[1]；
//推动样式器
styles.push（ob）；
//推陈出新
风格。推（风格）；
}
});
//设置贴图样式
map.setOptions({
样式：样式
});
}
初始化（）
#地图画布{
高度：150像素；
}

改变水色
隐藏标签
可能与@geocodezip重复，但不完全相同。他们似乎使用了与我现在的工作类似的方法，我为他们想要的每一种样式都有单独的样式对象。我不知道
setOptions
是一种我可以调用的方法，我可能可以使用它来进一步将其组合在一起，使其功能更接近我想要的结果。谢谢你的指导。你传递到地图上的样式只是一个单独样式的数组。您可能可以在每次“切换”某个内容时根据输入（复选框、按钮或其他内容）重新生成该数组，并使用
map.setOptions（）
，它允许在不重新加载任何内容的情况下更新样式。我在这里发布了一个示例：@MrUpsidown这就是我最终要做的。基于复选框布尔更改了我的选项对象，然后运行setOptions只刷新地图样式。我基本上做了一些非常类似的事情，但方法略有不同。我将在下面发布我的解决方案。你至少可以对那些显然帮助你实现目标的答案进行投票。这就是它在这里的工作方式。这是类似的，是的，除了这将只适用于1个控件，而我的解决方案将适用于任何数量的控件。
  {
    'featureType': 'all',
    'elementType': 'labels',
    'stylers': [{'visibility': 'off'}]
  }

// 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}); 
  });