谷歌地图上的自定义标记

Question

问题详情

默认图标显示，但我期望使用自定义图标作为标记。以下代码是否缺少什么？

我正在使用 Laravel 5.6.12 和 vue.js，并尝试在 Google 地图上显示自定义图标。我的模板代码如下：

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

- Pankaj

---

你可以查看 https://github.com/xkjyeah/vue-google-maps/issues/38 了解详细教程。 - ittus

你能展示一下错误或结果吗？ - Wellwisher

页面没有错误。我只想显示我的图标，而不是默认的红色标记。 - Pankaj

Answer 1

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

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

- Akin Hwan

Answer 2

我曾经遇到过类似的问题，下面的解决方案有效。只需在gmap-marker中添加:icon="{ url:'./path-/to/-icon.png'}"即可。例如，你的脚本应该是这样的：

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

- Dunsin Olubobokun

---

你从哪里获取这些图标链接？我需要一个房子图标，但是找不到。 - Programmer