Google地图上的自定义标记 [英] Custom marker over google map

问题描述

问题详细信息

显示默认图标，我希望标记使用自定义图标.我在以下代码中缺少任何内容吗?

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屋！