参考
项目安装vue-baidu-map
参考我的另外一篇uni-app使用npm安装第三方包
在项目的main.js中加入
由于我的项目中基本都要用到地图,所以我全局引入的
// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'hMCSwlS4c3QxxxxxFmgdSST5G8T40YX'
})
这里要用你自己的key,自己去申请一个
页面中使用
先看效果
html
<view class="map">
<baidu-map class="map-contain" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" MapType="BMAP_SATELLITE_MAP" @ready="mapReady">
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @locationSuccess="getMyLocation()" :showAddressBar="true"
:autoLocation="true"></bm-geolocation>
<bm-marker @dragend="markerDrag" :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
<!--<bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
</bm-marker>
</baidu-map>
</view>
js
zoom:18,//地图相关设置
center:{lng:0,lat:0}
markerDrag(x){
console.log( x.point);
this.center.lat = x.point.lat;
this.center.lng = x.point.lng;
},
mapReady({BMap, map}) {
// 下面注释是百度地图API官方实现方法
// console.log(1)
// console.log(map);
// console.log(BMap);
let that = this;
var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r) {
console.log("d");
console.log(r);
//getStatus拿到的是状态信息,失败与否
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);//将覆盖物添加到地图中
// map.panTo(r.point);//将地图的中心点更改为给定的点
that.center.lng = r.point.lng;
that.center.lat = r.point.lat;
that.showToast('您所在位置为经度:' + r.point.lng + ',纬度:' + r.point.lat);
// alert('您的位置:' + r.point.lng + ',' + r.point.lat);
} else {
that.showToast("位置信息获取失败,"+ this.getStatus());
}
}, {
enableHighAccuracy: true//要求浏览器获取最佳结果
})
},
其他一些文章
推荐:百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度
vue-baidu-map 的简单使用
vue-baidu-map进入页面自动定位的解决方案
uni-app 之地图 map
uni-app 支持多端第三方地图定位的方法
vue结合百度地图(vue-baidu-map)根据经纬度查询省市街道信息