微信 网页开发 获取地理位置 高德地图显示

1、微信中获取地理位置经纬度

 wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  success: function (res) {
    const latitude = res.latitude // 纬度,浮点数,范围为90 ~ -90
    const longitude = res.longitude // 经度,浮点数,范围为180 ~ -180。
    console.log(latitude)
    console.log(latitude)
  }
})

2、将其他坐标转化为高德坐标
https://lbs.amap.com/api/javascript-api/guide/transform/convertfrom

var gps = [116.3, 39.9];
AMap.convertFrom(gps, 'gps', function (status, result) {
  if (result.info === 'ok') {
    var lnglats = result.locations; // Array.<LngLat>
  }
});

3、地理编码与逆地理编码
https://lbs.amap.com/api/javascript-api/guide/services/geocoder

AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
    city: '010'
  })
 
  var lnglat = [116.396574, 39.992706]

  geocoder.getAddress(lnglat, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        // result为对应的地理位置详细信息
    }
  })
})
### UniApp 微信小程序集成高德地图获取用户当前位置 #### 准备工作 为了使微信小程序能够成功调用高德地图API来获得用户的地理位置信息,需先完成必要的准备工作。这包括但不限于申请有效的API Key以及按照官方指导设置项目权限。 对于API key的获取,访问高德开放平台网站注册账号并创建应用即可得到专属密钥[^1]。接着,在`manifest.json`文件内的`permission`部分添加相应授权声明以便后续操作顺利执行[^2]。 #### 实现过程 考虑到直接利用高德地图SDK可能存在的局限性——即其主要适用于APP端与网页环境而非原生支持小型应用程序框架下的场景;因此推荐采用HTTP请求的方式间接达成目的。具体做法如下: - 调用 `uni.getLocation()` 方法取得设备当前坐标数据; - 构建URL字符串向高德服务器发起GET请求传递上述所得经纬度参数; - 解析返回JSON对象提取所需地理描述详情。 ```javascript // 获取当前位置 async function getLocationInfo() { try { const res = await uni.getLocation({ type: 'gcj02', // 返回可以用于显示在地图上的坐标 geocode: true, }); let { latitude, longitude } = res; // 请求高德地图逆地理编码服务接口 const url = `https://restapi.amap.com/v3/geocode/regeo?key=您的Key&location=${longitude},${latitude}`; const geoRes = await uni.request({url}); console.log('Location Info:', geoRes.data.regeocode.formatted_address); } catch (error) { console.error(error); } } ``` 值得注意的是,由于安全策略限制,所有外部网络资源链接都应事先加入到微信公众平台上指定的小程序合法domain名单里才能正常加载[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值