unaippvue2项目使用百度地图展示地图获取当前用户位置,并在地图上根据后端返回的信息打点点击点位有弹出框,显示当前位置和打点位置的距离和导航
时间: 2024-12-10 21:39:09 浏览: 46
在UnaippVue2项目中,使用百度地图API来展示地图并获取用户的实时位置是一个常见的需求。以下是实现这个功能的一般步骤:
1. **安装依赖**:首先需要安装`@baidubmap/api`和相关的库,例如`element-ui`用于构建弹窗组件。
```bash
npm install @baidubmap/api element-ui
```
2. **初始化地图**:在Vue组件中,通过BMap SDK初始化地图实例,并设置中心点和缩放级别。
```javascript
import BMap from '@baidubmap/api';
export default {
mounted() {
this.initMap();
},
methods: {
initMap() {
const map = new BMap.Map('map-canvas');
map.centerAndZoom(new BMap.Point(0, 0), 15); // 设置中心点和初始缩放级别
}
}
}
```
3. **获取用户位置**:利用`BMap.Geolocation`服务来获取用户位置,然后更新地图标记。
```javascript
methods: {
getLocation() {
new BMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000, // 超时时间
convert: true, // 将坐标转换成WGS84坐标系
}).start(() => {
const location = this.getLocationResult(arguments[0]);
// 更新地图并添加标记
this.map.setCenter(location);
// 添加标记显示位置信息
this.addMarker(location);
}, () => {
console.log('定位失败');
});
},
getLocationResult(info) {
return info.position;
},
addMarker(location) {
// 创建标记
const marker = new BMap.Marker(location);
map.addOverlay(marker);
// 当用户点击标记时触发事件
marker.addEventListener('click', this.showInfoWindow);
},
showInfoWindow(e) {
const currentLocation = '您当前的位置';
const markerLocation = `打点位置: ${e.target.getPosition().toString()}`;
const dialog = this.$el.querySelector('.dialog-box');
dialog.show();
dialog.content.innerHTML = `<p>${currentLocation}</p><p>距离:${getDistance(currentLocation, markerLocation)}</p>`;
}
}
```
这里假设有一个简单的`getDistance`函数用来计算两点间的距离,你可以根据实际需求编写此函数。
阅读全文
相关推荐














