vue.js Google Maps 3.54为Map添加样式

jgwigjjp  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(170)

我目前正在使用谷歌Map3.54(最新版本)进行vue2项目,由于advancedMarkers,需要使用此版本。

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

我阅读了所有关于样式化Map的文档,我以前在其他版本上做过。但我找不到路。
我尝试在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

我没有错误,但两种情况都没有变化。我能尝试什么?

更新

有一个工作的例子的麻烦:https://jsfiddle.net/981w4zxb/1/
如果像示例中那样删除mapId,则样式为apply,但在这种情况下,标记不再起作用。
如果添加mapid,则显示高级标记,但styles不适用。
我都想要,这是强制性的太使用先进的标记风格没有云,但遗留styles

yquaqz18

yquaqz181#

不确定Vue的情况如何,但你的代码看起来是正确的-有或没有&v=3.54
问题是,如果你用一个mapId示例化你的map,构造函数中的styles属性将不会覆盖map的外观。
因此,如果您没有与mapId关联的云样式,请将其从构造函数中删除。你的styles应该马上申请。我怀疑this.map.setMapTypeId(...)也会生效。

更新

不能同时使用mapId s和styles。当你这样做时,你会得到警告:
当存在mapId时,无法设置Map的styles属性。当存在mapId时,Map样式通过云控制台控制。请参阅www.example.com上的文档https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling
由于样式定义存储在数据库中,因此您可能需要创建单独的mapId及其关联的云样式。
或者,您可以重新考虑使用高级标记。这里是a guide to explore alternatives。* 取消者:我写了指南。
最后,您可能希望关注gcloud cli,在将来的某个时候,它可能允许您以编程方式创建mapId s和样式--就像Google为API Keys所做的那样。

相关问题