uniapp小程序高德地图实时定位

记录，留后自用：

小程序项目按要求必须使用高德地图。

在使用uniapp开发小程序过程中，如何使用高德地图进行定位？

自测成果图以下：

其中使用了map组件map | uni-app官网

 map组件默认为腾讯地图。我这里也是腾讯地图的“身子”，但是使用的是高德的“脑袋”。

1.先进入高德地图开发平台创建key。

高德开放平台 | 高德地图API

进入网页右上角点击进入控制台  -->  首页 基础服务使用概况  

根据需要创建添加key。

2.manifest.json 中微信小程序配置，位置接口填写描述。

 3.根据以下网址，进入下载插件。在创建的项目中，新建一个名为 libs 目录，将下载的插件拷贝进入libs目录。

相关下载-微信小程序插件 | 高德地图API

4.准备工作完成，上代码：

<template>
	<view>
		<view class="map_container">
			<map id="myMap" class="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
				:markers="markers" show-location @poitap="poitap"></map>
		</view>
		<view class="location">
			<text class="local">{{local}}</text>
			<text class="distance" v-if="range!==''">(距离你{{range}})</text>
			<u-button text="确定" @click="goback()"></u-button>
		</view>
	</view>
</template>

<script>
	import amapFile from "../../libs/amap-wx.130.js";
	var self, mapCtx
	export default {
		data() {
			return {
				key: '你的key',
				latitude: '',
				longitude: '',
				local: '',
				distance: '',
				// 标记点
				markers: [],
				range: '',
				circles: [],
				radius: 0
			}
		},
		onLoad() {
			self = this
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
			self.getLocationInfo()
			// var amaFile = require('../../libs/amap-wx.130.js')
			this.amapObject = new amapFile.AMapWX({
				key: '你的key'
			})
		},
		methods: {
			// 位置授权
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								console.log("经纬度", res);
							},
						})
					},
					fail() { // 拒绝授权
						this.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				var that = this;
				this.amapObject = new amapFile.AMapWX({
					key: '你的key'
				})
				this.amapObject.getRegeo({
					iconPath: "../../static/marker.png",
					success: (res) => {
						console.log(res, res[0].regeocodeData.formatted_address)
						// 移动到当前位置
						that.toLocation(res)
						that.latitude = res[0].latitude;
						that.longitude = res[0].longitude;
						that.local = res[0].regeocodeData.formatted_address
						that.markers = [{
							id: 1,
							latitude: res[0].latitude,
							longitude: res[0].longitude,
							iconPath: res[0].iconPath,
							// name: 'map',
							width: 12,
							height: 20,
						}],
						// 地图半径画圆
						this.circles = [{
							latitude: res[0].latitude,
							longitude: res[0].longitude,
							fillColor: "rgba(255,42,65,0.08)",
							color: "#FF0000",
							radius: 50,
						}]
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			toLocation(obj) {
				// 改变地图中心位置
				console.log(obj)
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: false,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude,
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
			poitap: function(e) {
				console.log(e, "poitap")
				var obj = e.detail
				self.toLocation(obj)
				console.log(e.detail.name)
				this.local = e.detail.name
				console.log(this.latitude,this.longitude)
				var distance = this.getDistance(this.latitude,this.longitude,e.detail.latitude,e.detail.longitude)
			    distance = parseInt(distance * 1000);
				if (distance != null && distance>0){
				    this.range = distance + "米";
				    if (distance >= 1000) {
						this.range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
				    }
				}
			},
			goback() {
				console.log(this.local)
				uni.setStorageSync('local', this.local)
				uni.navigateBack()
			},
			// 计算距离
			getDistance: function(lat1, lon1, lat2, lon2) {
				var EARTH_RADIUS = 6378.137; //地球半径
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var radlon1 = lon1 * Math.PI / 180.0;
				var radlon2 = lon2 * Math.PI / 180.0;
				//差值
				var vLat = radLat1 - radLat2;
				var vLon = radlon1 - radlon2;
				//s就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(vLat / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(vLon / 2), 2)));
				s = s * EARTH_RADIUS;
				var distance = Math.round(s * 10000) / 10000;
				return distance;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map_container {
		width: 100%;
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;

		.map {
			height: 100%;
			width: 100%;
		}
	}

	.location {
		width: 95%;
		height: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		// height: 80px;
		background: #fff;
		padding: 2.5%;
		overflow: hidden;
		.distance{
			color: #4295FA;
			font-size: 12px;
		}
	}
</style>