使用 vue3-google-map 拟合谷歌地图边界

Question

我正在尝试构建一个 Vue 组件，该组件接收一组 gps（纬度/经度）数据，并且必须使用谷歌地图折线在地图上绘制。它一直工作到现在。当我尝试使用 map.fitbounds 来管理缩放并将地图居中到该折线时，问题就出现了。根据 vue3-google-map documentation 我尝试使用 ref="mapRef" 创建对地图对象的引用。不幸的是，在 mount() 钩子中，我似乎找不到该对象，在 Vue DevTools 中它稍后会显示出来。

<template>
<GoogleMap ref="mapRef" api-key="<myapikey>" style="width: 100%; height: 500px" :center="center" :zoom="15">
    <Polyline :options="path" />
</GoogleMap>
</template>

<script>
import {
    defineComponent,
    ref
} from 'vue'
import {
    GoogleMap,
    Polyline
} from 'vue3-google-map'

export default defineComponent({
    components: {
        GoogleMap,
        Polyline
    },
    setup() {
        const mapRef = ref(null)
        return {
            mapRef
        }
    },
    methods: {
        managebounds(path) {
            this.intervalid = setInterval(function () {
                if (!this.bounds && !this.loaded) {
                    if (window.google && window.google.maps && path) {
                        this.bounds = new window.google.maps.LatLngBounds()
                        this.loaded = true
                        clearInterval(this.intervalid)
                        console.log("AFTER CLEAR")
                        this.bounds.extend(path.path[0]) //i take the first and last point of the polyline
                        this.bounds.extend(path.path[path.path.length - 1])
                        var extendBy = 0.001;
                        console.log("EXTEND1")
                        var point1 = new window.google.maps.LatLng(
                            this.bounds.getNorthEast().lat() + extendBy,
                            this.bounds.getNorthEast().lng() + extendBy
                        )
                        var point2 = new window.google.maps.LatLng(
                            this.bounds.getSouthWest().lat() - extendBy,
                            this.bounds.getSouthWest().lng() - extendBy
                        )
                        this.bounds.extend(point1);
                        console.log("EXTEND2")
                        this.bounds.extend(point2);
                        console.log("FITTING BOUNDS")
                        this.intervalid = setInterval(function () {
                            if (this.$refs.mapRef.value?.ready) {
                                console.log("LOADED")
                                this.$refs.mapRef.value.map.fitBounds(this.bounds); //here mapRef is undefined
                                clearInterval(this.intervalid)
                            } else {
                                console.log("NOT LOADED")
                            }
                        }, 1000)
                    } else {
                        console.log("OUT")
                    }
                }
            }, 500)
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.managebounds(this.path)
        })

    },
    data() {
        return {
            path: {
                path: this.gpspath.path,
                strokeColor: this.gpspath.color
            },
            bounds: null,
            loaded: false,
            intervalid: -1
        }
    },
    props: {
        "gpspath": {
            type: [],
            default: [{}]
        }
    }
})
</script>

关于解决此问题的任何提示？

Answer 1

我不得不再次阅读有关 computed 属性的 Vue 文档，并发现尝试构建方法是一个坏主意。 我在setup() 钩子中创建了一个函数，并从我的计算数据中调用它。 工作结果如下代码：

setup() {
    const mapRef = ref(null)
    function centermap(start, end){
        if (mapRef.value?.ready) {
            const gmap = mapRef.value.map;
            const api = mapRef.value.api;
            this.bounds = new api.LatLngBounds();
            this.bounds.extend(start);
            this.bounds.extend(end);
            gmap.fitBounds(this.bounds);
        }else{
            console.log("NOT READY")
        }
    }
    return {
        mapRef, centermap
    }
},
computed: {
    path() {
        if(this.gpspath){
            let filteredpath = this.gpspath.path.filter(x=>Math.abs(x.lat)>1)
            if(filteredpath && filteredpath.length>1)
                this.centermap(filteredpath[0], filteredpath[filteredpath.length-1])
            return {
                path: filteredpath,
                strokeColor: this.gpspath.color
            }
        }else{
            return {
                path: [],
                strokeColor: "#ffffff"
            }
        }
    }
}