vue-baidu-map-3x vue3中设置中心位置并自动移动到中点
在Vue3中,你可以使用vue-baidu-map-3x插件来设置地图的中心位置,并自动移动到中点。
首先,安装vue-baidu-map-3x插件:
npm install vue-baidu-map-3x
然后,在你的Vue组件中使用vue-baidu-map-3x插件。在模板中,使用baidu-map标签来显示地图,并设置center属性来指定地图的中心位置。在mounted钩子函数中,使用this.$refs.mapRef.setCenter方法来将地图移动到中点。
<template>
<div>
<baidu-map ref="mapRef" :ak="yourBaiduMapAK" :center="center" :zoom="zoom" style="width: 100%; height: 400px;"></baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
yourBaiduMapAK: 'Your Baidu Map AK',
center: { lng: 116.404, lat: 39.915 }, // 中心位置的经纬度
zoom: 12 // 缩放级别
}
},
mounted() {
this.$refs.mapRef.setCenter(new BMap.Point(this.center.lng, this.center.lat));
}
};
</script>
在上面的例子中,我们将地图的中心位置设置为北京市的经纬度。在mounted钩子函数中,使用this.$refs.mapRef.setCenter方法将地图移动到中点。
注意:在上面的例子中,yourBaiduMapAK是你自己的百度地图API密钥。你需要将其替换为你自己的密钥。
这样,你就可以在Vue3中设置地图的中心位置并自动移动到中点了
原文地址: https://www.cveoy.top/t/topic/inqR 著作权归作者所有。请勿转载和采集!