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）根據經緯度查詢省市街道信息