使用vue3谷歌地图拟合谷歌地图边界

Question

我正在尝试构建一个Vue组件，该组件接受gps(lat/lng(数据的输入，并且必须使用谷歌地图折线在地图上绘制这些数据。它一直在工作，直到这一点。当我试图使用map.fitbounds来管理缩放并将地图居中到该折线时，问题就出现了。根据vue3谷歌地图文档，我试图创建一个对地图对象的引用，其中ref＝"；mapRef"；。不幸的是，在mounted((钩子中，我似乎找不到那个对象，在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

我不得不再次阅读关于计算属性的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"
}
}
}
}

Answer 2

我也面临这个问题；这是我的解决方案：

带有地图的页面：

import { mapFitBounds } from "@/composables/mapFitBounds";
const mapRef = ref(null);
watch(
() => mapRef.value?.ready,
(ready) => {
if (!ready) return;
mapFitBounds(mapRef, markersArray);
}
);

compositables/mapFitBounds.js:

export function mapFitBounds(mapRef, markers) {
let bounds;
const api = mapRef.value.api;
const map = mapRef.value.map;
bounds = new api.LatLngBounds();
for (let i = 0; i < markers.length; i++) {
bounds.extend(markers[i]);
}
map.fitBounds(bounds);
}

Answer 3

这里有一个Typescript"类型安全"；具有Vue3成分的紧凑型变体API：

<script setup lang="ts">
...
const mapRef = ref(null)
watch(
() => (mapRef.value as any)?.ready,
(ready) => {
if (ready) {
console.log(">>> GoogleMap READY - setting bounds");
let mapRefVal: any = mapRef.value;
const gmap = mapRefVal.map;
const api = mapRefVal.api;
let bounds = new api.LatLngBounds(center);
for (let i = 0; i < markers.length; i++) {
bounds.extend(markers[i]);
}
gmap.fitBounds(bounds);
}
}
);
</script>