uniapp中进行地图定位

最近在用uniapp接入地图部分，之前用第三方的高德地图接入，内置浏览器正常显示，但是真机调试及打包测试是发现地图页空白
1、先获取appkey
获取高德地图KEY

2、引入map

<map :scale='18' id="myMap"  style="width: 100%;" :style="{height: mapHeight + 'px'}" 
:markers="markers"  :longitude="longitude" :latitude="latitude" :circles="circles"></map>

(1) .先设置map高度

onLoad() {
	const _this = this;
	uni.getSystemInfo({
		success: (res) => {
			_this.mapHeight = res.screenHeight - res.statusBarHeight
			_this.mapHeight = _this.mapHeight
		}
	})
},

(2) .获取当前位置

// 在data中初始化的中心位置
			latitude: 39.9,
			longitude: 116.4,

getLocationInfo() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res, "当前位置");
						that.latitude = res.latitude //当前纬度
						that.longitude = res.longitude//当前经度
						} 
					}）				
                  }

3、地图标记及圆圈展示

//data中定义
circles: [],//圆
markers:[]，//标记点

// 获取地理位置
getLocationInfo() {
	var that = this
	uni.getLocation({
		type: 'wgs84',
		success(res) {
			console.log(res, "当前位置");
			that.latitude = res.latitude
			that.longitude = res.longitude
			//标记点
			that.markers = [{
				id: 1,
				latitude: res.latitude,
				longitude: res.longitude,
				iconPath: '../../../static/img/pos.png',
			}]
			that.circles = [{ //在地图上显示圆
				latitude: res.latitude,
				longitude: res.longitude,
				fillColor: "#D9E6EF", //填充颜色
				color: "#A7B6CB", //描边的颜色
				radius: 50, //半径
				strokeWidth: 2 //描边的宽度
			}]
		}
	});
},

打包APK之后也是可以定位展示成功的：

4、地图打点操作
官方map提供了@tap方法，点击地图时返回经纬度