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

一.地图选择

通过uniapp官网提供的地图组件相关介绍,可以看到针对各个平台不同地图的支持程度,因为开发的项目是Android软件,所以综合以上选择使用高德地图进行开发。

二.高德地图使用

1.申请key

先去高德官网申请key(首页 | 高德控制台 (amap.com))

这里我是为项目申请了两个key,绑定服务分别是Android平台和web服务,Android平台主要用于uniapp的manifest.json处绑定地图使用,web服务用于经纬度解析,这里可根据需求申请。注意申请key时填入的SHA1码与包名需要与app最终打包使用的证书、包名一致,否则会导致项目打包后地图功能无法使用。

2.uniapp中配置地图key。

​根据自己使用的地图配置相应的key,ios平台如果没有开发需求,可与Android填写一致或随意填入一个值,如果都有开发需求,需要申请不同的key填入。

三.地图展示

1.地图展示

效果图展示:

<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 //描边的宽度 
					},
				]

2:默认位置展示

地图初始时展示用户所在的位置,这里使用uniapp官网中获取地理位置的方法(uni.getLocation),可以获取到所在位置的经纬度。使用高德逆向地理编码把经纬度转化成用户默认所在位置展示在输入框。

getAddress() {
				const that = this
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					method: 'GET',
					data: {
						location: this.longitude + ',' + this.latitude,
						key: '6f0bdc094c8980af9171b369b919ea21'
					},
					success(res) {
						if (res.data.regeocode.formatted_address) {
							if (that.isadd == 1) {
								that.form.address = res.data.regeocode.formatted_address
							}
						}
					}
				})
			},

3:地图根据输入地址显示

地理编码与逆地理编码-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)

把用户输入的位置进行正向地理编码,获取到经纬度,在地图展示(这里使用的key是web服务)

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)
						}
					}
				})
			},

4:增加了打开地图和回到原点功能

让用户使用地图更加方便。打开地图主要是利用用户手机上面的第三方软件,如果没有相关软件,会申请下载。

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("本机未安装指定的地图应用");
									}
								}
							})
						});
					}
				})
			},

  • 8
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在Uniapp使用高德地图,你可以按照以下步骤进行操作: 1. 首先,你需要在高德开放平台上注册一个开发者账号,并创建一个应用。获取你的高德地图API Key。 2. 在Uniapp项目使用插件市场的`uni-amap`插件或者手动引入高德地图的JavaScript API库。 - 使用`uni-amap`插件:在HBuilderX打开插件市场,搜索并安装`uni-amap`插件。 - 手动引入:在Uniapp项目的`index.html`文件添加以下代码引入高德地图的JavaScript API库: ```html <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 注意替换`YOUR_API_KEY`为你在高德开放平台上获取的API Key。 3. 在需要使用高德地图的页面使用`<view>`组件创建一个地图容器,并给它一个固定的宽度和高度。 4. 在页面的`<script>`标签,引入高德地图的JavaScript API库后,可以通过`AMap`全局对象来使用高德地图的相关功能。 ```javascript export default { onReady() { // 创建地图实例 const map = new AMap.Map('map-container', { zoom: 10, // 设置地图缩放级别 center: [longitude, latitude] // 设置地图心点坐标 }); // 添加标记点 const marker = new AMap.Marker({ position: [longitude, latitude] // 设置标记点坐标 }); map.add(marker); } } ``` 注意替换`longitude`和`latitude`为你需要显示的地图心点和标记点的经纬度。 这样,你就可以在Uniapp使用高德地图了。你可以根据高德地图开发文档,进一步了解如何使用其它功能,例如搜索、路线规划等。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值