微信公众号本地调试获取地理位置并通过高德api获取天气信息

shitBro
532 阅读2分钟

本地调试首先配置测试号以及重定向链接详情见juejin.cn/post/726741…

公众平台配置项

测试号配置：

  1. JS接口安全域名配置为项目访问额域名或ip，这里是本地启动项目的ip

image.png

线上版也要在微信后台配置下

image.png

  1. 对话服务->用户管理->开启获取用户地理位置

使用微信API获取定位

  1. 公众号H5页面需要引入JS-SDK，以vue为例：

安装：npm i weixin-js-sdk 引入：import wx from 'weixin-js-sdk'

JS-SDK说明文档developers.weixin.qq.com/doc/offiacc…

  1. 通过config接口注入权限验证配置
//签名等参数听过后台接口返回
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表,这里是要调用获取地理位置的api
});
  1. 微信ready后调用获取地理位置接口
   wx.ready(function () {
     wx.getLocation({
       type: 'wgs84',
       highAccuracyExpireTime: 4000,
       success: function (res) {
           var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
           var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
           var speed = res.speed; // 速度，以米/每秒计
           var accuracy = res.accuracy; // 位置精度
       },
       fail: function (error) {
         // window.alert('微信地址错误'+error)
       },
     });
   })
  1. 通过wx.getLocation获取到经纬度获取当前行政区划编码（高德天气接口需要穿行政区划）

高德地图获取天气需要根据行政区划查询，可以用高德地图 JS API中 逆向地理编码获取对应的地址信息，详情移步lbs.amap.com/api/javascr…

 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为对应的地理位置详细信息
   }
 })
})
  1. 进去高德开放平台配置相关信息

备注： 高德地图鱼也提供了一种ip定位的接口，根据当前ip获取位置信息，可用于网页端定位，详情移步文档 lbs.amap.com/api/webserv…

avatar
文章
阅读
粉丝