vue3项目引入百度地图,实现选取坐标功能
时间: 2024-10-17 11:15:54 浏览: 14
在Vue3项目中引入百度地图API并实现坐标选择功能,你需要按照以下步骤操作:
1. **安装依赖**:
首先,你需要通过npm或yarn添加百度地图JavaScript API的依赖,例如:
```bash
npm install @baidubce/map
```
2. **注册并初始化地图**:
在你的组件中,导入`BMap.Map`和`BMap.Point`,然后创建一个新的`BMap.Map`实例,并设置地图容器ID:
```javascript
import BMap from '@baidubce/map';
export default {
setup() {
const mapContainer = document.getElementById('map-container');
return { map: new BMap.Map(mapContainer) };
},
mounted() {
// 初始化地图配置,如中心点、缩放级别等
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 北京坐标
}
};
```
3. **添加鼠标点击事件监听**:
添加鼠标点击事件,当用户点击地图时,获取点击位置:
```javascript
methods: {
handleClick(e) {
const point = this.map.getPoint(e.point);
console.log('点击坐标:', point.lng, point.lat);
// 这里可以根据需要处理点击后的坐标信息
}
},
mounted() {
this.map.addEventListener('click', this.handleClick);
},
beforeDestroy() {
this.map.removeEventListener('click', this.handleClick);
}
```
4. **样式美化** (可选):
如果需要改变地图的样式或添加标记,可以参考百度地图文档进行调整。
阅读全文