uniapp 安装使用高德地图api 获取当前定位

1.安装 

npm i @amap/amap-jsapi-loader --save

2.引入

import AMapLoader from '@amap/amap-jsapi-loader';

3.创建容器

<view id="container"></view>
<style>
	#container {
		padding: 0px;
		margin: 10px;
		width: 100%;
		height: 280px;
	}
</style>

4.初始化地图

initMap() {
				AMapLoader.load({
					key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key,首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
					plugins: ['AMap.Geocoder', 'AMap.Geolocation'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
				}).then((AMap) => {
					var map = new AMap.Map('container', {
						zoom: 15,
						resizeEnable: true
					});
					map.plugin('AMap.Geolocation', () => {
						var geolocation = new AMap.Geolocation({
							enableHighAccuracy: true, //是否使用高精度定位,默认:true
							timeout: 100, //超过10秒后停止定位,默认:无穷大
							maximumAge: 0, //定位结果缓存0毫秒,默认:0
							convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
							showButton: true, //显示定位按钮,默认:true
							buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
							buttonOffset: new AMap.Pixel(10, 20),
							showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
							showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
							panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
							zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
						});
						map.addControl(geolocation);
						//获取定位信息
						geolocation.getCurrentPosition((status, result) => {
							if (status == 'complete') {
							//成功执行的回调函数
								this.onComplete(result)
							} else {
							//失败执行的回调函数
								this.onError(result)
							}
						});

					});
				}).catch(e => {
					console.log(e);
				})
			},

5.获取当前定位

onComplete(data) {
				console.log('定位成功')
				        //发送请求
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo', //逆地理编码接口地址。
					data: {
						key: '申请好的Web服务开发者Key',
						//location:经纬度  lng :经度  lat:纬度  
						location: data.position.lng + ',' + data.position.lat,
						radius: 1000,
						extensions: 'all',
						batch: false,
						roadlevel: 0
					},
					header: {
						//自定义请求头信息
					},
					success: (res) => {
					//详细地址信息
						console.log(res.data.regeocode.formatted_address);
					}
				});
			},
			//解析定位错误信息
			onError(data) {
				console.log('定位失败')
				console.log('失败原因排查信息:' + data.message)
				console.log('浏览器返回信息:' + data.originMessage)
			}

注意!!!
初始化地图使用的是 web端开发者key
发送请求使用的是Web服务开发者key

 

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
UniApp使用高德地图可以通过uni-amap插件来实现。uni-amap是一个基于高德地图API封装的UniApp插件,可以方便地在UniApp项目中使用高德地图的各种功能。 使用uni-amap插件,你需要先在UniApp项目中引入该插件。可以通过以下步骤来完成: 1. 在HBuilderX中打开你的UniApp项目。 2. 在项目根目录下找到manifest.json文件。 3. 在manifest.json文件中找到"uni_modules"字段,如果没有则手动添加该字段。 4. 在"uni_modules"字段中添加uni-amap插件的引用,示例如下: ``` "uni_modules": { "uni-amap": { "version": "1.0.0", "provider": "uni.amap" } } ``` 5. 保存manifest.json文件,HBuilderX会自动安装uni-amap插件。 安装完插件后,你可以在页面中使用uni-amap提供的组件和API来实现高德地图的功能。以下是一些常用的功能和使用方法: 1. 显示地图:使用`<uni-amap>`组件可以在页面中显示地图,可以设置中心点、缩放级别等属性。 2. 标记位置:使用`<uni-amap-marker>`组件可以在地图上标记位置,可以设置标记的经纬度、图标等属性。 3. 定位当前位置:使用`uni.getLocation` API可以获取当前设备的位置信息,可以结合`<uni-amap>`组件将当前位置显示在地图上。 4. 路线规划:使用`uni.amap.getDrivingRoute` API可以进行驾车路线规划,可以设置起点、终点、途经点等参数,返回规划的路线信息。 5. 地理编码和逆地理编码:使用`uni.amap.geocode`和`uni.amap.regeocode` API可以进行地址和经纬度之间的转换,可以根据地址获取经纬度,或者根据经纬度获取地址信息。 以上是一些使用高德地图的基本功能和方法,你可以根据具体需求来选择使用。如果需要更详细的使用说明和示例代码,可以参考uni-amap插件的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值