将基于云的地图风格应用于vue2谷歌地图

Question

正如这些文档中提到的，我们现在可以通过设置地图的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
});

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

这成功地将map_id广告到了url，但它仍然不适用于我，即使使用了正确的url。

也许我做错了完全不同的事情；回答"；实际上对你有效。

Answer 2

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"
}
});