Google maps 如何在Vue中保存google maps编辑的多边形路径

我有一个包含标记组件位置的Vue组件底图。 “位置”组件有一个可以进行编辑的多边形标记

// BaseMap
<GmapMap>
  <Location :location="location" />
</GmapMap>


// Location
<gmap-marker>
  <gmap-polygon
    ref="polyMarker"
    :editable="true"
    :path="location.path"
    @mouseup="updatePath('polyMarker')"
  />
</gmap-marker>

<script>

  methods: {
   updatePath(ref_name){
     console.log(this.$refs[ref_name].path) // same array as origin
   }
  }

</script>

//基本映射
//位置
方法：{
更新路径（参考名称）{
console.log（this.$refs[ref\u name].path）//与原点相同的数组
}
}

如何访问多边形的新编辑点？如果我使用这个.$ref.polyMarker.path，我会一直得到原始的点数组，而不是新的点数组

编辑 在与MrUpsidown讨论之后，我继续在codesandbox中编写最小应用程序。同样的问题也存在

Dependancies:
- vue
- vue2-gmap-cuspom-marker

//////////////////////////////////////////////////////////////
// main.js
import Vue from "vue";
import App from "./App.vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.config.productionTip = false;

Vue.use(VueGoogleMaps, {
  load: {
    //    libraries: "places", // This is required if you use the Autocomplete plugin
    key: "[USE YOUR OWN KEY]"
  }
  //  autobindAllEvents: false,
  //  installComponents: true
});
new Vue({
  render: h => h(App)
}).$mount("#app");


//////////////////////////////////////////
//App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>


//////////////////////////////////////////////////////
// HelloWorld.vue

<template>
  <div>
    <baseMap/>
  </div>
</template>

<script>
import baseMap from "@/components/baseMap";

export default {
  name: "HelloWorld",
  components: { baseMap },
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>


////////////////////////////////////////////////////
//baseMap.vue

<template>
  <div>
    <GmapMap :style="'height:500px'" :center="center" :zoom="zoom">
      <Location :location="location"/>
    </GmapMap>
  </div>
</template>

<script>
import Location from "@/components/Location";

export default {
  name: "baseMap",
  components: { Location },
  data: function() {
    return {
      center: { lat: -33.9249, lng: 18.4241 },
      zoom: 12,
      location: {
        path: [
          { lat: -33.91170210440241, lng: 18.422548745513268 },
          { lat: -33.90993912517883, lng: 18.422806237578698 },
          { lat: -33.90874597713464, lng: 18.42422244393856 },
          { lat: -33.90482806012767, lng: 18.42952248895199 },
          { lat: -33.90073186345211, lng: 18.42428681695492 },
          { lat: -33.90128397100101, lng: 18.420596097350426 },
          { lat: -33.90256627151344, lng: 18.417656396270104 },
          { lat: -33.90367045927834, lng: 18.416454766631432 },
          { lat: -33.90532671411109, lng: 18.417913888335534 },
          { lat: -33.908389810302396, lng: 18.413579438567467 },
          { lat: -33.91084733115123, lng: 18.41703412377865 },
          { lat: -33.91170210440241, lng: 18.422548745513268 }
        ]
      }
    };
  },
  props: {
    msg: String
  }
};
</script>

<style>
</style>



/////////////////////////////////////////////////////////
// Location.vue

<template>
  <div>
    <gmap-marker>
      <gmap-polygon
        ref="polyMarker"
        :editable="true"
        :path="location.path"
        @mouseup="updatePath('polyMarker')"
      />
    </gmap-marker>
  </div>
</template>

<script>
import GmapCustomMarker from "vue2-gmap-custom-marker";

export default {
  name: "Location",
  components: {
    GmapCustomMarker
  },
  props: {
    location: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    updatePath(name) {
      console.log(this.$refs[name].path);
    }
  }
};
</script>

<style>
</style>

从属关系：
-vue
-vue2 gmap尖端标记
//////////////////////////////////////////////////////////////
//main.js
从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“vue2谷歌地图”导入*作为VueLogleMaps；
Vue.config.productionTip=false；
Vue.use（VueLogleMaps{
负载：{
//库：“places”，//如果使用Autocomplete插件，这是必需的
密钥：“[使用您自己的密钥]”
}
//自动车道事件：错误，
//installComponents：true
});
新Vue({
渲染：h=>h（应用程序）
}).$mount（“#app”）；
//////////////////////////////////////////
//App.vue
从“/components/HelloWorld”导入HelloWorld；
导出默认值{
名称：“应用程序”，
组成部分：{
你好世界
}
};
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
}
//////////////////////////////////////////////////////
//HelloWorld.vue
从“@/components/baseMap”导入baseMap；
导出默认值{
名称：“HelloWorld”，
组件：{baseMap}，
道具：{
msg:String
}
};
////////////////////////////////////////////////////
//baseMap.vue
从“@/components/Location”导入位置；
导出默认值{
名称：“基本地图”，
组件：{Location}，
数据：函数（）{
返回{
中心：{lat:-33.9249，lng:18.4241}，
缩放：12，
地点：{
路径：[
{拉丁美洲：-33.91170210440241，液化天然气：18.422548745513268}，
{拉丁美洲：-33.90993912517883，液化天然气：18.422806237578698}，
{拉丁美洲：-33.90874597713464，液化天然气：18.42422244393856}，
{拉丁美洲：-33.90482806012767，液化天然气：18.42952248895199}，
{拉丁美洲：-33.90073186345211，液化天然气：18.42428681695492}，
{拉丁美洲：-33.90128397100101，液化天然气：18.420596097350426}，
{拉丁美洲：-33.90256627151344，液化天然气：18.417656396270104}，
{拉丁美洲：-33.90367045927834，液化天然气：18.416454766631432}，
{拉丁美洲：-33.90532671411109，液化天然气：18.41791388335534}，
{拉丁美洲：-33.908389810302396，液化天然气：18.413579438567467}，
{拉丁美洲：-33.91084733115123，液化天然气：18.41703412377865}，
{拉丁美洲：-33.91170210440241，液化天然气：18.422548745513268}
]
}
};
},
道具：{
msg:String
}
};
/////////////////////////////////////////////////////////
//Location.vue
从“vue2 gmap自定义标记”导入GmapCustomMarker；
导出默认值{
名称：“地点”，
组成部分：{
GmapCustomMarker
},
道具：{
地点：{
类型：对象，
默认值（）{
返回{}；
}
}
},
方法：{
更新路径（名称）{
console.log（this.$refs[name].path）；
}
}
};

首先将

:path

替换为

:path

：

:paths="location.path"

然后将

@mouseup

事件替换为

@paths\u changed

，使用

$event

作为参数：

@paths_changed="updatePath($event)"

最后记录你的路径；您将看到它现在是如何更新的

updatePath(mvcArray) {
  for (let i = 0; i < mvcArray.getLength(); i++) {
    for (let j = 0; j < mvcArray.getAt(i).getLength(); j++) {
      console.log(mvcArray.getAt(i).getAt(j).lat() + "," + mvcArray.getAt(i).getAt(j).lng());
    }
  }
  console.log("-------")
}

updatePath（mvcArray）{
for（设i=0；i

要获得进一步的指导，我建议您查看该库的示例，例如

---

希望这对你有帮助

您使用的是哪个Vue谷歌地图软件包？请提供允许重现此问题的标记。@MrUpsidown我正在使用在vue_元素_管理框架上运行的“vue2 gmap自定义标记”。我的假设是正确的。this.$refs[ref_name]。路径应该随着多边形的变化而变化？请使用您的方法在

上尝试

@paths_changed

（就像您对

@mouseup

所做的那样）。可能选中。@MrUpsidown我已经在codesanbox中编写了使应用程序工作的最低代码（将其添加到原始帖子中），我也遇到了同样的问题。我看过您给我的示例，但它在单个文件中使用事件侦听器。如何在基于组件的系统中实现这一点？您不想共享代码沙盒的链接吗？很高兴听到并乐于提供帮助！：）