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

参考

申请百度地图的key

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

Vue Baidu Map 定位控件

VUE BAIDU MAP

地图上标记点

百度地图的zoom级别介绍

百度地图Geolocation的getStatus状态值

uniapp的map组件

项目安装vue-baidu-map

初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：

npm init -y

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

安装依赖

在项目根目录执行命令安装npm包：

npm install vue-baidu-map --save

使用

安装完即可使用npm包，js中引入npm包：

import package from 'packageName'
const package = require('packageName')

uni-app支持使用npm安装第三方包

https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81

在项目的main.js中加入

由于我的项目中基本都要用到地图，所以我全局引入的（项目根目录>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）根据经纬度查询省市街道信息

以上是转载

https://blog.csdn.net/gabriel_wei/article/details/105849565

---

完整代码

main.js

import Vue from 'vue'
import App from './App'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
	  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
	  ak: 'v3Cg0hRvbX7cuUSKG2sEklyeP8iw5eye'
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

地图页完整代码

<template>

	<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>

</template>
<script>
	export default {
		onLoad(res) {
			console.log("加载") 
			// console.log("加载百度地图")
			// var util = require('http://api.map.baidu.com/getscript?v=2.0&ak=v3Cg0hRvbX7cuUSKG2sEklyeP8iw5eye&services=&t=20200824135534');  //require这个js模块  
			// console.log(util)

		},
		data() {
			return {
				zoom: 18, //地图相关设置
				center: {
					lng: 0,
					lat: 0
				}
			}
		},
		methods: {
			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;
						console.log('您所在位置为经度：' + r.point.lng + ',纬度：' + r.point.lat);
						// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
					} else {
						console.log("位置信息获取失败，" + this.getStatus());
					}
				}, {
					enableHighAccuracy: true //要求浏览器获取最佳结果
				})
			},

		},

	}
</script>

<style>
template{
	width: 100%;
	height: 100%;
}
.map{
	width: 100%;
	height: 600px;
}
.map-contain{
	width: 100%;
	height: 100%;
}
</style>