javascript - 使用 Vuejs 从 GoogleMaps 实现 fitBounds
问题描述
我正在尝试获取地图的边界,而不是使用一种方法,因为我已经创建了一个 initMap 方法和一个 askGeolocation 方法。
我无法使边界正常工作,因此地图的缩放会适应不同标记的位置。
我试图创建一个方法 useBounds,在 addMarker 中调用,但它不起作用。我也尝试将处理边界的代码直接放入 addMarker() 中,但它仍然不起作用。
我认为我没有正确地将标记的 LatLng 放入边界方法中。
<template>
<div class="main" ref="autreRef">
<div class="google-map" v-bind:id="mapName" ref="mainMap" @click="openComponent">
</div>
</div>
</template>
<script>
const GoogleMapsLoader = require('google-maps');
GoogleMapsLoader.KEY = 'API_KEY';
export default {
name: 'google-map',
props: ['name'],
data: function() {
return {
mapName: this.name + "-map",
userCoord: {},
markers: [],
map: null,
bounds: null,
infoWindow: null,
position: {
lat: null,
lng: null
}
}
},
mounted: function() {
GoogleMapsLoader.load((google) => {
this.$store.watch(
(state, getters) => getters.getRestaurantInfo,
(newValue, oldValue) => {
newValue.map((restaurant) => {
this.addMarker({
lat: restaurant.lat,
lng: restaurant.long
}, 'restaurant')
})
}
)
this.initMap();
this.askGeolocation();
// this.useBounds();
});
},
methods: {
initMap() {
const element = this.$refs.mainMap
const options = {
center: {lat: 48.842129, lng: 2.329375},
zoom: 18,
}
this.map = new google.maps.Map(element, options);
this.infoWindow = new google.maps.InfoWindow;
},
askGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
this.userCoord = pos
this.addMarker(this.userCoord, 'user')
this.map.setCenter(pos);
}, function() {
handleLocationError(true, this.infoWindow, this.map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, this.infoWindow, this.map.getCenter());
}
},
// useBounds() {
// this.bounds = new google.maps.LatLngBounds();
// this.bounds.extend(marker.position);
// this.map.fitBounds(this.bounds);
// },
addMarker(coord, type) {
let icon = ''
if (type === 'user') {
icon = 'https://img.icons8.com/color/48/000000/marker.png'
} else {
icon = 'https://img.icons8.com/ios/50/000000/restaurant-table.png'
}
console.log('j ajoute ', coord)
const position = new google.maps.LatLng(coord.lat, coord.lng);
const marker = new google.maps.Marker({
position,
map: this.map,
icon
});
// this.useBounds();
this.bounds = new google.maps.LatLngBounds();
this.bounds.extend(marker.position);
this.map.fitBounds(this.bounds);
this.markers.push(marker);
},
removeMarker(marker) {
marker.setMap(null)
},
openComponent() {
this.$router.push('/add-restaurant/');
}
},
computed: {
}
};
</script>
我希望使边界工作并设法以与其余代码相同的方式实现它们,而不是通过在其他地方调用的方法。谢谢你的帮助。
解决方案
警告:这是一个黑客。 代替:
this.map.fitBounds(this.bounds);
尝试这样做:
this.$nextTick(() => {
this.map.fitBounds(this.bounds);
});
推荐阅读
- python - 求解线性方程组以使用 scipy 最大化价值
- javascript - 从其他文件执行异步代码时的 Node.js 和 node-gtk 问题
- docker - 在多个 docker 容器之间分发文件
- python - 为什么索引 Numpy 列会创建副本,而不是行或一维数组?
- javascript - 为什么模态出现然后消失?
- c - 为什么我的 C 代码中的答案前面有“-”标记?
- c# - 从href点击列表中删除项目
- javascript - 使用 d3.js 创建径向(圆形)分组条形图
- link-to - Rails 5 无法完成“belongs_to”
- java - JVM堆栈中的局部变量表