问题
Issue Details
Default icon is showing and I am expecting a custom icon for marker. Am I missing anything in below code?
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 Code
<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>
回答1:
Have you tried this? Binding icon to the gmap-marker element
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position">
:icon="m.icon"
</gmap-marker>
回答2:
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>
来源:https://stackoverflow.com/questions/50710063/custom-marker-over-google-map