uniapp微信小程序使用百度地图bmap-wx.js,实现地图显示、获取当前位置(包含地点名称)和围栏守护(包含动态修改大小)的功能,代码实现
时间: 2024-04-13 16:28:13 浏览: 138
在Uniapp微信小程序中使用百度地图bmapx.js实现地显示、获取当前位置(含地点名称)和围守护(包含动态修改大小)的功能,你可以按照以下步骤进行操作:
1. 安装bmap-wx.js依赖:
在项目根目录下打开终端或命令行,执行以下命令安装bmap-wx.js依赖:
```
npm install bmap-wx --save
```
2. 在`main.js`中引入bmap-wx.js:
```javascript
import BMap from 'bmap-wx';
Vue.prototype.BMap = BMap;
```
3. 在需要使用地图的页面中引入百度地图组件:
```html
<template>
<view>
<view class="map-container">
<map :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" @markertap="markerTap"></map>
</view>
</view>
</template>
<style scoped>
.map-container {
width: 100%;
height: 100%;
}
</style>
```
4. 在`<script>`中定义地图相关的数据及方法:
```javascript
<script>
export default {
data() {
return {
longitude: 0, // 当前位置经度
latitude: 0, // 当前位置纬度
scale: 14, // 地图缩放级别
markers: [], // 地图标记点
}
},
mounted() {
this.getLocation();
},
methods: {
getLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.markers = [{
id: 1,
longitude: res.longitude,
latitude: res.latitude,
title: '当前位置',
iconPath: '/static/icons/location.png',
width: 20,
height: 20
}];
this.getPlaceName(res.latitude, res.longitude);
},
fail: (err) => {
console.log('获取位置失败', err);
}
});
},
getPlaceName(latitude, longitude) {
let BMap = new this.BMap.BMapWX({ ak: '你的百度地图AK' });
BMap.regeocoding({
location: `${latitude},${longitude}`,
success: (res) => {
console.log('位置信息', res);
this.markers[0].title = res.originalData.result.formatted_address;
},
fail: (err) => {
console.log('逆地址解析失败', err);
}
});
},
markerTap(e) {
console.log('点击了标记点', e);
},
}
}
</script>
```
5. 在`manifest.json`文件中添加百度地图的权限配置:
```json
{
"mp-weixin": {
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序的地图展示和定位功能"
}
}
}
}
```
6. 实现围栏守护功能:
你可以使用`polyline`组件来绘制围栏,具体操作请参考Uniapp官方文档。
以上是一个简单的示例,你可以根据自己的需求进行修改和扩展。请注意,在使用百度地图API时,需要在百度开放平台申请密钥(AK)并替换代码中的相应部分。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)