谷歌地图上的自定义标记

Posted 2023-02-22

【中文标题】谷歌地图上的自定义标记

【英文标题】：Custom marker over google map

【发布时间】：2018-11-15 12:42:09

【问题描述】：

问题详情

默认图标正在显示，我期待标记的自定义图标。我在下面的代码中遗漏了什么吗？

我正在使用 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>

【问题讨论】：

详细教程可以查看github.com/xkjyeah/vue-google-maps/issues/38

你能显示错误或结果吗？

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

【参考方案1】：

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

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

【参考方案2】：

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

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

【讨论】：

从哪里获得这些图标链接？我需要一个房子图标，但我找不到