Question

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

我试图在我的自定义样式地图上切换特定的样式选项，而不必重新初始化地图并丢失掉落的任何针脚或搜索的位置。

例如，关闭和开启道路标签。我以一种黑客的方式完成了这项工作，我创建了两个完整的样式对象，然后用map.setMapTypeId在它们之间切换。

这个问题是：a）它非常重复，而且b）我有很多选项可以切换，所以不得不为我的切换的每一个变体制作样式表 - 有能力的选择是不现实的。

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

e.g。

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

然后连接这种风格：

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

我无法改变原始对象，因为样式不会重新加载地图，导致我丢失标记和地图位置。

我需要它来运行像map.setMapTypeId('styled_map', 'styled_map_2');这样的东西，我的样式只是编译好了。

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

Answer 1

执行此操作的一种方法如本文Looking For a Correct Way to Hide or Display Streets on Map

中所述

如果您只需要打开和关闭元素的可见性，就可以了。

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

＆＃13;

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();

＆＃13;

#map-canvas {
  height: 150px;
}

＆＃13;

<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>

＆＃13;

代码被评论，所以应该很容易理解这个概念。显然，如果您需要使用一个复选框更改多个选项，则需要对其进行一些扩展。

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

堆叠地图样式（Google Maps API）

2 个答案: