如何通过单击更改vue中的活动标记图标

Question

我正在使用 vue2-google-maps，这将是完美的 - 通过单击它来更改标记图标。我尝试编写一些代码，但它无法正常工作。

模板：

<gmap-map
        ref="mainMap"
        :center="startLocation"
        :zoom="6"
        map-type-id="roadmap"
        style="width: 100%; height: 100%"
        :options="{
            zoomControl: false,
            scaleControl: false,
            mapTypeControl: false,
            fullscreenControl: false,
            streetViewControl: false,
            disableDefaultUi: false
          }"
      >
        <gmap-marker
          v-for="(item, key) in coordinates"
          :key="key"
          :position="getPosition(item)"
          :clickable="true"
          :icon="markerOptions"
          @click="toggleInfo(item, key)"
        ></gmap-marker>
      </gmap-map>

脚本：

...

let mapMarker = require('../images/ic-map-marker.svg'),
    mapMarkerActive = require('../images/ic-map-marker-active.svg');

...

startLocation: {
    lat: 49.0384,
    lng: 33.4513
},
coordinates: {
    0: {
        city: City 0,
        lat: '50.4021702',
        lng: '30.3926088'
    },
    1: {
        city: City 1,
        lat: '49.9543502',
        lng: '36.1241697'
    }
},
infoOpened: false,
infoCurrentKey = null,
markerOptions: {
    url: mapMarker
}

...

toggleInfo: function (marker, key) {
    if (this.infoCurrentKey == key) {
        if (this.infoOpened) {
            this.infoOpened = false;
            this.markerOptions = this.mapMarker;
        } else {
            this.infoOpened = true;
            this.markerOptions = this.mapMarkerActive;
        }
    } else {
        this.infoOpened = true;
        this.infoCurrentKey = key;
        this.markerOptions = this.mapMarkerActive;
    }
}

所有标记都通过点击变为活动图标。有人可以帮我吗？

提前致谢！

完整代码在这里：https://codesandbox.io/s/map-vue-template-mv33z

Answer 1

所有地图标记都引用相同的标记选项对象。当您更改该对象时，它会影响所有地图标记。

你可以有一个名为

的数据属性

selectedKey: null

有一个像这样的方法：

getMarkers(key) {
  if (this.selectedKey === key) return this.mapMarkerActive;
  return this.mapMarker;
},

那么你可以

:icon="getMarkers(key)"

或者你想要识别所选标记的任何逻辑（我个人会在标记坐标对象上放置一个 id，然后有一个 selectedMarker 数据属性）

在我的示例中，我修改了您的示例，现在图标会按您的要求显示。

https://codesandbox.io/s/map-vue-template-q67u0

如何通过单击更改vue中的活动标记图标

How to change active marker icon in vue by clicking

google-maps

vue.js

marker

vue2-google-maps