更改事件上的多边形选项谷歌地图

如何解决更改事件上的多边形选项谷歌地图

正在尝试更改mouSEOver上多边形的笔触颜色。问题是，我不知道/无法找到有关如何从事件访问setoptions方法的适当文档。

<GmapMap ref="google_map" :center="{ lat: 0,lng: -0 }">
    <gmap-polygon
        v-for="(polygon,i) in polygons"
        :key="`polygon-${i}`"
        ref="google_map_polygon"
        :paths="polygon.vertices"
        :options="polygonoptions"
        @mouSEOver="polygonHover"
    />
</GmapMap>

Js

export default {
    data: () => ({
        polygons: [],polygonoptions: {
            strokeColor: 'transparent',}
    }),...
    methods: {
        polygonHover (event) {
           // Change strokeColor here.
        }
    }
}

解决方法

您可以按照以下步骤进行操作：

1. 声明您的路径和初始多边形选项：

polygon: {
            paths: [{
              lat: 1.380,lng: 103.800
            },{
              lat: 1.380,lng: 103.810
            },{
              lat: 1.390,lng: 103.800
            }],polygonOptions: {
              strokeColor: 'transparent',}

2. 将这些值映射到 <gmap-polygon 内的参数中。然后，您可以在 mouseover 和 mouseout 事件上放置方法。

 <gmap-polygon :paths="polygon.paths" :editable="true" :options="polygon.polygonOptions" @mouseover="changePolygonMouseOver($event)" @mouseout="changePolygonMouseOut()" ref="google_map_polygon">
      </gmap-polygon>

3. 使用 this.$refs.google_map_polygon.$polygonObject 调用多边形对象，然后使用 setOptions() 在鼠标悬停和鼠标移出事件期间设置多边形选项。在 mouseOut 上，您可以使用多边形选项的初始值 this.polygon.polygonOptions:

     methods: {
          changePolygonMouseOver: function() {
            this.$refs.google_map_polygon.$polygonObject.setOptions({
              strokeColor: 'red',})
          },changePolygonMouseOut: function() {
            console.log("mouseOut")
            this.$refs.google_map_polygon.$polygonObject.setOptions(this.polygon.polygonOptions)
          }
        }

这是 working code。