如何在Vue中保存谷歌地图编辑的多边形路径

Question

我有一个Vue组件BaseMap，它包含一个标记组件Location。"位置"组件有一个可以编辑的多边形标记。

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

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

编辑

在与Upsidown先生讨论后，我继续在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>

Answer 1

首先用:paths:替换:path

:paths="location.path"

然后使用$event作为参数将@mouseup事件替换为@paths_changed：

@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("-------")
}

为了获得进一步的指导，我建议你看看图书馆的例子，比如这个。

希望这对你有帮助！