Google地图上的自定义标记 [英] Custom marker over google map
本文介绍了Google地图上的自定义标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问题详细信息
显示默认图标,我希望标记使用自定义图标.我在以下代码中缺少任何内容吗?
Default icon is showing and I am expecting a custom icon for marker. Am I missing anything in below code?
我正在使用Laravel 5.6.12和vue.js,并尝试在Google地图中显示自定义图标.我的代码在模板的下面.
I am using Laravel 5.6.12 and vue.js and trying to show custom icon in google map. My code is below in template.
<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>
推荐答案
我遇到了类似的问题,并且下面的解决方案有效.就像将:icon="{ url:'./path-/to/-icon.png'}"
添加到gmap-marker一样简单.例如,您的脚本应如下所示:
I had similar issue, and the solution below works. It's as simple as adding :icon="{ url:'./path-/to/-icon.png'}"
to gmap-marker. For example, your script should look like:
<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>
这篇关于Google地图上的自定义标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文