[Vuejs]-Showing Polygon Map With Dynamic Path On VueJS

0👍

The problem was solved
i am adding the watch function for watching the newPath inside the polygon components. So, this is the code :

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

Leave a comment