Google 地图 3.54 添加样式到地图

Question

我目前正在使用谷歌地图3.54（最新版本）开发一个vue2项目，由于advancedMarkers的原因，需要使用此版本。

https://maps.googleapis.com/maps/api/js?key=${this.mapKey}&callback=isMapLoad&libraries=marker&v=3.54

我阅读了所有有关设置地图样式的文档，并且我之前在其他版本上已经完成过。但我找不到路。

我尝试在 init 上设置样式：

this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom,
  styles: [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
})

或者在初始化之后：

const styledMapType = new google.maps.StyledMapType(
 [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
)
this.map.mapTypes.set('styled_map', styledMapType)
this.map.setMapTypeId('styled_map')

// i have added to my script url the libraries maps to have StyledMapType

我没有收到错误，但两种情况都没有任何变化。我可以尝试什么？

Answer 1

不确定 Vue 的情况如何，但你的代码看起来是正确的 - 有或没有

&v=3.54

。

问题是，如果您使用

mapId

实例化地图，则构造函数中的

styles

属性不会覆盖地图的外观。

因此，如果您没有与

mapId

关联的云样式，请从构造函数中将其删除。您的

styles

应立即申请。我怀疑

this.map.setMapTypeId(...)

也会生效。