taro 获取用户地理位置信息、通过腾讯地图获取城市等信息

我就是我 2021-07-24 13:26 2745阅读 1赞

1、在app.config.js中设置
    
    	"permission":{
    	    "scope.userLocation":{
    	      "desc": "获取地理位置信息的用途描述"
    	    }
    	  }
    
    2、授权成功后,通过Taro.getLocation获取地理位置信息
    	
    	Taro.getLocation({
            type: 'wgs84',
            success: function (res) {
              console.log(res);
            }
        })
        
        配置参数:
            altitude	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
    		complete	接口调用结束的回调函数（调用成功、失败都会执行）
    		fail	接口调用失败的回调函数
    		highAccuracyExpireTime	高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
    		isHighAccuracy	开启高精度定位
    		success	接口调用成功的回调函数
    		type	wgs84 返回 gps 坐标，gcj02 返回可用于 Taro.openLocation 的坐标
    
    	回调函数的参数
    		accuracy	位置的精确度
    		altitude	高度，单位 m
    		horizontalAccuracy	水平精度，单位 m
    		latitude	纬度，范围为 -90~90，负数表示南纬
    		longitude	经度，范围为 -180~180，负数表示西经
    		speed	速度，单位 m/s
    		verticalAccuracy	垂直精度，单位 m（Android 无法获取，返回 0）
    		errMsg	调用结果
    
    3、使用打开微信内置地图
       	Taro.openLocation({
              latitude, 必传
              longitude,	必传
              address	地址的详细说明
    		  complete	接口调用结束的回调函数（调用成功、失败都会执行）
    		  fail	接口调用失败的回调函数
    		  name	位置名
    		  scale	缩放比例，范围5~18
    		  success	接口调用成功的回调函数
        })
     
    4、用户在地图上自己选择位置
    	(1)在config/index.js中配置
        	  defineConstants: {
    		    LOCATION_APIKEY: JSON.stringify('腾讯地图密钥')
    		  }
    	(2)打开地图选定位置
    		  Taro.chooseLocation({
    			complete	接口调用结束的回调函数（调用成功、失败都会执行）
    			fail	接口调用失败的回调函数
    			latitude	目标地纬度,不传为当前位置
    			longitude	目标地经度,不传为当前位置
                success(res)
                {
                   ...
                }
    	      })
    		  
    
    5、使用腾讯地图获取地址等信息
    	 Taro.getLocation({
            type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
            success: function (res) {
              const latitude = res.latitude
              const longitude = res.longitude
              
    		  //下载qqmap-wx-jssdk,然后引入其中的js文件
              var QQMapWX = require('../..//utils/sdk/qqmap-wx-jssdk.min.js');
    
              var qqmapsdk = new QQMapWX({
                key: '腾讯地图开发者密钥' // 必填
              });  
    
              //逆地址解析,通过经纬度获取位置等信息
              qqmapsdk.reverseGeocoder({
                location:{latitude,longitude},
                success: function(res){
                	获取当前城市
                    console.log(res.result.address_component.city);
                    具体参数查看
                    https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder
                }
    
              })
            }
        })

代码示例:

Taro.getLocation({ 
            type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
            success: function (res) { 
              const latitude = res.latitude
              const longitude = res.longitude
              Taro.openLocation({ 
                latitude,
                longitude,
                scale: 18
              })
            }
        })

逆地址解析代码示例:

Taro.getLocation({ 
          type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
          success: function (res) { 
            const latitude = res.latitude
            const longitude = res.longitude
            var QQMapWX = require('../..//utils/sdk/qqmap-wx-jssdk.min.js');
    
            var qqmapsdk = new QQMapWX({ 
              key: 'xx' // 必填
            });  
            console.log(latitude,longitude);
            qqmapsdk.reverseGeocoder({ 
              location:{ latitude,longitude},
              success: function(res){ 
                  console.log(res.result.address_component.city);
              }
    
            })
          }
      })