谷歌地图上的自定义标记

Question

问题详细信息

显示默认图标，我期待标记的自定义图标。我在下面的代码中缺少任何内容吗？

我正在使用 Laravel 5.6.12 和 vue.js并尝试在谷歌地图中显示自定义图标。我的代码在模板下面。

<template>
<div>        
<gmap-map
:center="center"
:zoom="12"
style="width:100%;  height: 400px;">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position">
</gmap-marker>
</gmap-map>
</div>
</template>

JS代码

<script>
export default {
data() {
return { 
center: { lat: 30.2457963, lng: 75.84207160000005 },
markers: [],
places: []
}
},
created() {
this.markers.push({ 
position: this.center, 
icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png' 
});
},
methods: {
}
}
</script>

Answer 1

你试过这个吗？将图标绑定到 gmap 标记元素

<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position">
:icon="m.icon"   
</gmap-marker>

Answer 2

我遇到了类似的问题，下面的解决方案有效。这就像将:icon="{ url:'./path-/to/-icon.png'}"添加到gmap标记器一样简单。例如，脚本应如下所示：

<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon="{ url:'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'}">
</gmap-marker>