uniapp微信小程序使用百度地图bmap-wx.js,实现地图显示(包含初始化百度地图)、获取当前位置(包含地点名称)和围栏守护(包含动态修改大小)的功能,代码实现
时间: 2024-04-14 12:29:28 浏览: 364
在Uniapp微信小程序中使用百度地图bmap-wx.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: [], // 地图标记点
BMap: null, // 百度地图对象
map: null, // 地图实例
}
},
mounted() {
this.initMap();
this.getLocation();
},
methods: {
initMap() {
this.BMap = new this.BMap.BMapWX({ ak: '你的百度地图AK' });
this.map = new this.BMap.BMapGL.Map('map-container');
},
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) {
this.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. 在页面的`<template>`中增加一个id为`map-container`的容器:
```html
<template>
<view>
<view id="map-container" 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>
```
以上是一个简单的示例,你可以根据自己的需求进行修改和扩展。请注意,在使用百度地图API时,需要在百度开放平台申请密钥(AK)并替换代码中的相应部分。
阅读全文