在VueJS上显示具有动态路径的多边形图

Question

我在vuejs中实现google map时遇到了一些麻烦。我是这样创建多边形组件的：

<script>
    export default {
        name: "MapPolygon",
        props: {
            google: {
                type: Object,
                required: true
            },
            map: {
                type: Object,
                required: true
            },
            paths: {
                type: Array,
                required: true
            }
        },

        mounted() {
            const { Polygon } = this.google.maps;

            new Polygon({
                paths: this.paths,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: this.map,
            });
        },

        render() {}
    }
</script>

然后，当我单击某些数据时，多边形将无法在地图上显示。这是我的代码：

    <template>
             <map-loader :map-config="mapConfig">
                  <template slot-scope="{google, map}">
                        <map-polygon
                             :google="google"
                             :map="map"
                             :paths="zone">
                        </map-polygon>
                  </template>
             </map-loader>
    </template>

    <script>
    import MapLoader from "../../../components/maps/MapLoader";
    import MapPolygon from "../../../components/maps/MapPolygon";

    export default {
        name: "PolaRuang",
        components: {MapPolygon, MapLoader},
        data() {
            return {
                zone: [],
            }
        },

        computed: {
            mapConfig() {
                return {
                    ...mapSettings
                }
            },
        },

        methods: {
            getMap(polaRuangId){
                this.spinner = true;
                axios.post(`/truang/service/pola/showPolaRuang/${polaRuangId}`)
                    .then(response => {
                        this.zonaRuang = response.data;
                        this.spinner = false;
                    })
                    .catch(error => {
                        this.spinner = false;
                        this.$toasted.global.error(error.response.data);
                    })
            },
        }
    }
</script>

如果我将区域数据设置为静态，则多边形将显示在地图上，但是当我将其设置为动态时，则多边形将无法显示。有人可以帮我解决这个问题吗？谢谢！

Answer 1

    <script>
    export default {
        name: "MapPolygon",
        props: {
            google: {
                type: Object,
                required: true
            },
            map: {
                type: Object,
                required: true
            },
            paths: {
                type: Array,
                required: true
            }
        },

        watch: {
             async paths (newPaths) {
                const { Polygon } = this.google.maps;

                let polygon = new Polygon({
                    paths: newPaths,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,

                });
                polygon.setMap(this.map);
            }
        },

        mounted() {
            const { Polygon } = this.google.maps;

            new Polygon({
                paths: this.paths,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: this.map,
            });
        },

        render() {}
    }
</script>