uniapp开发的App中使用高德地图_uniapp app调用高德地图

<map id="map" style="width: 100%; height:100%;" :latitude="latitude" :longitude="longitude"
				:markers="markers" scale="16" :show-compass='true' :circles="circles" :controls="controls"
				show-location>
			</map>

// 展示地图
				let arr = [{
					id: 0,
					longitude: this.longitude,
					latitude: this.latitude,
					name: "所在位置"
				}]
				let markers = []
				for (var i = 0; i < arr.length; i++) {
					markers = markers.concat({
						id: arr[i].id,
						latitude: arr[i].latitude, //纬度
						longitude: arr[i].longitude, //经度
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: arr[i].name, //文本
							color: '#ffaa00', //文字颜色
							fontSize: 18, //文本大小
							borderRadius: 8, //边框圆角
							bgColor: '#00c16f', //背景颜色
							display: 'ALWAYS', //常显
						},
						label: { //标签备注
							content: '',
							bgColor: 'red'
						},
						iconPath: '/static/dingwei.png', //	显示的图标
						width: 50,
						height: 50,
						position: { //控件位置
							left: 0,
							top: 0,
							width: 0,
							height: 0
						}
					})
				}
				this.markers = markers; // markers就是地图选点一样的功能,显示小坐标
				// 地图上显示所在图标结束
				this.controls = [{
					id: 1,
					position: { //控件在地图的位置
						left: 15,
						top: 15,
						width: 10,
						height: 10
					},
					iconPath: '/static/定位.png'
				}]
				console.log(this.circles)
				this.circles = [{ //在地图上显示圆
						latitude: this.latitude,
						longitude: this.longitude,
						fillColor: "#3BBAFD29", //填充颜色（透明度）
						color: "#3BBAFD", //描边的颜色
						radius: 160, //半径
						strokeWidth: 2 //描边的宽度
					},
					{ //在地图上显示圆
						latitude: 36.647,
						longitude: 114.550,
						fillColor: "#3BBAFD29", //填充颜色
						color: "#3BBAFD", //描边的颜色
						radius: 100, //半径
						strokeWidth: 2 //描边的宽度 
					},
				]

getOtherAddress() {
				const that2 = this
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo',
					method: 'GET',
					data: {
						address: this.form.address,
						key: '6f0bdc094c8980af9171b369b919ea21'
					},
					success(res) {
						if (res.data.geocodes) {
							const location = res.data.geocodes[0].location.split(',')
							that2.longitude = location[0]
							that2.latitude = location[1]
							console.log(that2.longitude)
						}
					}
				})
			},

openMap() {
				//点击打开第三方地图APP
				// #ifdef APP
				this.openNavigation(this.longitude, this.latitude, this.form.address)
				//高德地图
				// #endif
			},
			//打开地图
			// 导航 会打开导航菜单供用户选择
			openNavigation(longitude, latitude, name) {
				let url = ""; // app url
				let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
				let qqmapkey = "ZOYBZ-DO4W7-ATZX2-HS2ZK-UBSCO-JFFBX"
				plus.nativeUI.actionSheet({ //选择菜单
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "高德地图"
					}, {
						title: "百度地图"
					}, {
						title: "腾讯地图"
					}] // 可选的地图类型
				}, (e) => {
					// 判断用户选择的地图
					switch (e.index) {
						//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
						case 1: //打开高德地图
							if (plus.os.name == "Android") { // 安卓
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							} else { //苹果
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							}
							webUrl =
								`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
							break;
						case 2: //打开百度地图
							if (plus.os.name == "Android") { // 安卓
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
							} else { //苹果
								url =
									`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
							}
							webUrl =
								`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
							break;
						case 3: //打开腾讯地图
							if (plus.os.name == "Android") { // 安卓
								url =
									`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${qqmapkey}`
							} else { //苹果
								url =
									`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${qqmapkey}`;
							}
							webUrl =
								`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${qqmapkey}`
							break;
					}
					// 如果选中
					if (url != "") {
						url = encodeURI(url);
						// console.log(url, '地址')
						// 打开 app 导航 
						plus.runtime.openURL(url, (err) => { // 失败回到
							// 毕竟用户可能没有安装app但一定安装的有浏览器						
							// 如果失败则说明未安装 直接 打开网页版进行导航
							let chooseMap = ''
							if (e.index == 1) {
								chooseMap = "高德地图"
							} else if (e.index == 2) {
								chooseMap = "百度地图"
							} else {
								chooseMap = "腾讯地图"
							}
							uni.showModal({
								title: '提示',
								content: '检测到您本机暂未安装' + chooseMap + '应用，是否要选择使用浏览器打开？',
								confirmText: '确定', //确定文本的文字
								cancelText: '取消', //确定文本的文字
								showCancel: true, //没有取消按钮的弹框
								success: function(res) {
									if (res.confirm) {
										plus.runtime.openURL(webUrl)
										console.log('用户点击了确定')
									} else if (res.cancel) {
										console.log('用户点击了取消')
										// plus.nativeUI.alert("本机未安装指定的地图应用");
									}
								}
							})
						});
					}
				})
			},