如何使用 vue2-google-maps 在标记周围添加虚线边框

问题描述

我想在点击标记时在汽车图像周围添加边框。我该怎么做？

        <gmap-marker
          :key="index"
          v-for="(m,index) in markers"
          :position="{
            lat: m.location.latitude,lng: m.location.longitude,}"
          :icon="markerOptions"
        >
        </gmap-marker>
      </gmap-cluster>

  markerOptions: {
    url: require('~/assets/images/car.svg'),scaledSize: { width: 50,height: 50,f: 'px',b: 'px' },},

解决方法

您可以使用 2 种类型的图标来完成此操作 - 一种带有您当前的汽车图标，另一种带有边框的汽车图标。为此，步骤如下：

1. 将您的 2 个图标（网址）放入数据中。

 data: {
          center: {
            lat: 10.0,lng: 10.0
          },icon: 'http://maps.google.com/mapfiles/kml/shapes/donut.png',newIcon: 'http://maps.google.com/mapfiles/kml/shapes/target.png',

2. 然后，您还为数据中的选定标记标志创建一个变量，值为 null： selectedMarker: null

3. 在 <google-marker/> 中，在您的 @click 中放入一个方法值，然后传递标记和键： @click="markerClicked(m,key)"

然后在方法上，声明 markerClicked，然后将 key 传递给您之前声明的 selectedMarker。这将保存所选标记的键值：

 markerClicked: function(marker,key) {
            this.selectedMarker = key
          },

4. 在 <google-marker/> 中，将方法值放入您的 :icon。这将处理您将显示的图标。 :icon=getIcon(key)

然后在方法上，声明传递密钥的 getIcon。然后您将检查 selectedMarker 是否等于该键。如果是，这意味着这是活动标记，您将显示一个带有边框的新图标，如果不相等，您将只显示没有边框的标记。

getIcon: function(key) {
            if (this.selectedMarker == key) {
              return this.newIcon
            }else{
            return this.icon
            }
          }

这是一个 working code。