uniapp使用Vue Baidu Map（百度地图），页面加载自动获取经纬度

参考

申请百度地图的key

百度地图 JavaScript API v2.0类参考

Vue Baidu Map 定位控件

VUE BAIDU MAP

地图上标记点

百度地图的zoom级别介绍

百度地图Geolocation的getStatus状态值

uniapp的map组件

项目安装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）根据经纬度查询省市街道信息