uniapp H5/APP端获取用户的地理位置(高德地图)

1、第一步申请高德API的key,申请类型为【web端】与【web服务】
(1)【web端】主要是获取定位;
(2)【web服务】主要是uniapp H5端不能直接获取 地址信息(仅APP端支持),须先通过uni.getLocation获取经纬度,再通过第三方(高德)逆地理编码(高德逆地理编码)解析出地址信息

2、在H5 端使用地图和定位相关,需要在 manifest.json 内web配置腾讯或谷歌等三方地图服务商申请的秘钥(key),高德地图(web端key)需要额外配置 securityJsCode 或 serviceHost。配置了地图的key才能在H5中正常使用地图,否则会报 Map key is not configures。

遇到的坑:
1、H5 端获取定位信息,需要部署在 https 服务上,本地预览(localhost)仍然可以使用 http 协议。
2、用浏览器测试,需要打开浏览器的定位服务(本人用的是火狐);谷歌浏览器可能会获取不到任何信息,因为谷歌浏览器位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败

3、需要配置安全策略(nginx配置)

①查看配置文件路径;执行命令 nginx -t,已安装nginx话会返回nginx安装(/etc/nginx/nginx.conf )路径。

②修改nginx.conf文件;cd /etc/nginx打开nginx.conf找到add_header Content-Security-Policy添加第三方域名{*.amap.com(高德),*.qq.com(腾讯)} 例:

 location / {
      root   /项目路径;
      try_files $uri $uri/ /index.html $uri/ =404;
      index  index.html index.htm;
      add_header X-Content-Type-Options  'nosniff';#禁止嗅探文件类型
      add_header Content-Security-Policy "script-src 'self' *.amap.com *.qq.com 'unsafe-inline' 'unsafe-eval' blob: data: ;";#只允许同源下的js
      }

3、H5代码


	//获取经纬度
	getLocation() {
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: (res) => {
				const longs = res.longitude.toString();
				const lat = res.latitude.toString();
				if (longs !== '' && lat !== '') {
					this.turnAdrr(longs, lat)//经纬度转地区名
				}
			}
		});
	},
	// 转地址
	turnAdrr(longs, lat) {
		// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/
		let _key = '高德里你注册的key';//高德API key类型:web服务
		uni.request({
			method: 'GET',
			url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
			data: {
				key: _key,
				location: `${longs},${lat}`,
				output: 'JSON'
			},
			success: async (res) => {
				console.log(res.data.regeocode.formatted_address);
				//用户所在的地理位置信息
			},
			fail: r => {
				console.log(r);
			}
		});
	},

APP代码

1、配置密钥

2、直接调用uni.getLocation()拿到用户的所在位置,不需要进行解析,可以直接拿到

uni.getLocation({
    type: 'gcj02', //app直接获取地理位置信息要使用gcj02
    geocode:true , //必须要将geocode配置为true
	isHighAccuracy: true,
	success(res) {
		console.log(res.address)
	},
    fail(err){
    console.log(err)
}
})

uni-appH5项目中,可以使用高德地图API来获取当前定位。下面是一种实现方式: 1. 首先,在uni-app项目中安装高德地图插件。可以通过以下命令进行安装: ``` npm install @types/amap-js-api --save ``` 2. 在需要获取定位的页面中,引入高德地图的JS API。可以在`index.html`文件中添加以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_key"></script> ``` 其中,`your_amap_key`需要替换为你自己的高德地图开发者密钥。 3. 在页面的`methods`中,编写获取定位的方法。可以使用高德地图提供的`AMap.Geolocation`类来实现。以下是一个示例代码: ```javascript methods: { getLocation() { AMap.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认为true timeout: 10000, // 超过10秒后停止定位,默认:无穷大 }); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { // 定位成功,result中包含经纬度等信息 const { lng, lat } = result.position; console.log('当前位置经纬度:', lng, lat); } else { // 定位失败 console.log('定位失败'); } }); }); } } ``` 4. 在页面中调用`getLocation`方法即可获取当前定位信息。可以在按钮的点击事件中调用该方法: ```html <button @click="getLocation">获取当前定位</button> ``` 这样,当用户点击按钮时,就会触发获取当前定位的操作,并将结果输出到控制台中。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值