Google Maps API v3：如何使用监听器动态更改地图标签？

Using Google Maps API v3, how do I programmatically change the labels of my map?

使用Google Maps API v3，如何以编程方式更改地图的标签？

In order to change the Styles of my map, I use the following code:

为了更改地图的样式，我使用以下代码：

var Map_Style = //JSON format containing my map style;
var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: -19 , lng: -43.5},
    }); 
map.setOptions({styles: Map_Style}); //Applying the custom style to my map.

As you can see here, the labels are clearely displayed, in the basic view.

正如您在此处所见，标签在基本视图中清晰显示。

But when I change for the satellite view the labels are obfuscated by the Aerial Image. (Shown here.)

但是当我改变卫星视图时，标签会被航拍图像混淆。（如图所示。）

I want to use a listener that can change the map style when the user clicks in the buttons to change the map view. It would be something like the following?

我想使用一个可以在用户单击按钮更改地图视图时更改地图样式的侦听器。它会像下面这样的东西？

map.addListener('maptypeid_char', function(e) {
    //change the map Style
});

So, What would be the exactly approach for it?

那么，它的确切方法是什么？

1 个解决方案

#1

This is very doable. You just need to use a map event listener. Inside the listener, call your function that will change the map style. Sample of listeners are click, dblclick, drag, mouseover, etc.

这是非常可行的。您只需要使用地图事件监听器。在侦听器内部，调用将更改地图样式的函数。监听器示例包括click，dblclick，drag，mouseover等。

Here's a sample:

这是一个示例：

function initMap() {

   var myLatlng = {lat: -25.363, lng: 131.044};
   var customMapTypeId = 'custom_style';
   var customMapType = new google.maps.StyledMapType([
      {
        stylers: [
          {hue: '#890000'},
          {visibility: 'simplified'},
          {gamma: 0.5},
          {weight: 0.5}
        ]
      },
      {
        elementType: 'labels',
        stylers: [{visibility: 'on'}]
      },
      {
        featureType: 'water',
        stylers: [{color: '#890000'}]
      }
    ], {
      name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatlng
  });
 //listener for mouse click,etc
  map.addListener('click', function() {
     //execute your Style map change 
      map.mapTypes.set(customMapTypeId, customMapType);
      map.setMapTypeId(customMapTypeId);
  });
}

What's gonna happen here is that the Map Style (labels ,etc) will change when you click your mouse button. Here's a reference to labels, events that might help.

这里会发生什么，当您单击鼠标按钮时，地图样式（标签等）将会改变。这是对标签，可能有用的事件的引用。

#1