点击时以编程方式关闭 Google Maps POI

Question

我正在使用带有风格化地图的 Google Maps API，并且在我的网站上可以选择显示或隐藏兴趣点。默认情况下，POI 处于打开状态。当用户单击“隐藏”按钮时，我希望地图关闭 POI，但保留其余的主题样式设置。

我知道 Map.setOptions 函数，但是当我以这种方式使用它时：

map.setOptions({styles: [
  {
   "featureType": "poi",
   "stylers": [
    { "visibility": "off" }
  ]
}
]});

它会覆盖所有现有主题的设置，恢复为默认的谷歌地图外观，但 POI 已关闭。有没有办法关闭 POI 并保持当前主题？

Answer 1

地图是一个 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);
});

proof of concept fiddle

隐藏： 显示：

代码 sn-p：

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>