将基于云的地图样式应用于vue2-google-maps？

如这些docs中所述，我们现在可以通过设置地图的mapId属性来将基于云的样式应用于地图。

我尝试了运气：

<GmapMap ref="mapView" :center="driver.location" :zoom="15" :options="{ mapId: '84f11e866388cfc5' }">
</GmapMap>

但是没有用。我还尝试通过以下方式以编程方式添加地图：

new this.google.maps.Map(document.getElementById('container'),{
     mapId: '84f11e866388cfc5',center: {lat:61.180059,lng: -149.822075},zoom:12
});

它确实添加了地图，但未应用云中设计的自定义样式。根据文档，它要求MAP_ID也在API URL中进行设置，如下所示：

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_ID&callback=initMap">
</script>

但是该怎么做呢？有没有一种方法可以配置此插件以在导入API时设置MAP_ID？如果没有，还有其他的Vue插件可以完成这项工作吗？

任何帮助将不胜感激。

查看源代码后，我发现您可以在初始化Gmap模块时在url中添加任何内容

Vue.use(GmapVue,{
  load: {
    key: <your code>,libraries: "places",map_id: <your map-id>
  },installComponents: true
});

这成功地将map_id广告发布到了网址，但是即使使用正确的网址，它仍然对我不起作用。

也许我做错了完全不同的事情，这个“答案”实际上对您有用。

options : {
  mapId: "Your Map ID"
};

添加地图选项，将其放在您的GmapMap标签上

 <GmapMap :options="options">
    </GmapMap>

您的main.js

Vue.use(VueGoogleMaps,{
  load: {
    key: "Your map api key",map_ids: "Your map ID"
  }
});

相关问答