微信公众号开发(5)-调用jssdk获取地理位置经纬度及百度api获得城市

调用微信的jssdk需要先绑定js安全域名，这个在微信公众号后台自己设置就可以了。
还需要引入js文件，但由于我使用了vux，它里面的WeChatPlugin这个插件可以直接用commonJS方式引用，不需要再引用jsw文件，所以我直接在main.js中引入了插件，代码如下

import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)console.log(Vue.wechat) // 可以直接访问 wx 对象。

使用jssdk还需要注入配置信息，可以通过config接口注入权限验证配置,config获取配置信息方法如下：

wxConfig(WxUrl,apiList) {//微信验证信息来调用jssdkconst url = $config.baseURL+`api/public/weixin/getParams?signUrl=`+ WxUrl;$axios.get(url,{}).then(res => {const data = res.data.result;WechatPlugin.$wechat.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId || '', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: data.timestamp || '', // 必填，生成签名的时间戳nonceStr: data.nonceStr || '', // 必填，生成签名的随机串signature: data.signature || '',// 必填，签名jsApiList: apiList || [] // 必填，需要使用的JS接口列表});}).catch(err => {// 所有error情况统一在此处理，包括返回状态码为200，但response.data.success为false的情况// console.log(err);});},

获取到配置信息之后就可以调用相应的api来获得信息了，我在页面挂载的时候注入配置信息，并且调用获取经纬度的接口：

WX_CONFIGS.wxConfig(encodeURIComponent(window.location.href.split('#')[0]), ['getLocation']);//注册微信获取位置接口this.$wechat.ready(() => {console.log('这里是config success,说明验证成功');this.getCurrentLocation();//通过经纬度获得位置});this.$wechat.error((err) => {//        console.log(err);});

获取经纬度的方法：

getCurrentLocation(){//微信api获取当前经纬度let that = this;that.$wechat.getLocation({type: 'wgs84', // gps坐标  百度地图api用的百度坐标可能有偏差success: function (res) {let latitude = res.latitude;let longitude = res.longitude;let params = {"Longitude": longitude,"Latitude": latitude,};that.getCurrentCity(params.Longitude, params.Latitude);//根据经纬度获取城市}});},

获得经纬度之后我们可以用百度地图的api获得省市行政区和街道等信息，获取的方法如下：

getCurrentCity(longitude, latitude){//获取当前城市,行政区 // 百度地图API功能let address = "";let point = new BMap.Point(longitude, latitude);let gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {let addComp = rs.addressComponents;//详细地址为省，市，行政区，街道，街道地址address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;window.localStorage.city = addComp.city;//当前城市window.localStorage.district = addComp.district;});},

注意百度地图在使用的时候需要去官网注册并且获得一个key，才能正常调用，不然会报错。

微信公众号开发(5)-调用jssdk获取地理位置经纬度及百度api获得城市相关推荐

实例：用C#.NET手把手教你做微信公众号开发（4）--获取普通access_token、jsapi的方法；用MediaId获取微信服务器图片
一.access_token概念这里在后续几篇处理不同的普通消息文章前插播一个适用于整个微信公众号开发的公共类QinMingWeixinContainer,用于获取普通access_token和js ...
Java微信公众号开发之网页授权获取用户基本信息
本篇博客讲解的网页授权只需要前端传递一个backUrl(回调地址) 到后台接口,后台接口会完成整个授权流程,无需前端做更多工作: 一. 前言微信公众号开发,需要用到网页授权获取用户信息,通过OAut ...
微信公众号开发系列-网页授权获取用户基本信息
OAuth2.0网页授权这个也是在做微信公众平台用到最多的,可以利用授权接口对自己平台内用户进行绑定,实现用户扫描码和微信分享.微信签到.微信商城购物等: 1.高级接口OAuth2.0网页授权设置 a ...
微信公众号、地图定位、获取地理位置
本内容目标是在微信公众号中打开网页获取用户的定位信息. 1.腾讯地图定位没有将地图页面调出来,只是定位后返回json形式的地址 2.使用百度地图定位,调出地图界面,获取经纬度,alert地址 < ...
Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
C#微信公众号开发 -- （七）自定义菜单事件之VIEW及网页（OAuth2.0）授权
通俗来讲VIEW其实就是我们在C#中常用的a标签,可以直接在自定义菜单URL的属性里面写上需要跳转的链接,也即为单纯的跳转. 但更多的情况下,我们是想通过VIEW来进入指定的页面并进行操作. 举一个简 ...
微信公众号开发（七）发送客服消息
微信公众号开发(七)发送客服消息当用户和公众号产生特定动作的交互时(具体动作列表请见下方说明),微信将会把消息数据推送给开发者,开发者可以在一段时间内(目前修改为48小时)调用客服接口,通过POST ...
微信公众号开发（一）服务器及接口的配置
微信公众号开发(一)服务器及接口的配置关于微信公众号中的订阅号和服务的区别这里不多加讨论,网上有很多资源可以搜到,这里直接进入正题,如果是个人开发者,这里建议使用测试号进行开发学习,测试号的权限要比 ...
微信公众号开发（五）个性化菜单
微信公众号开发(五)个性化菜单个性化菜单让公众号的不同用户群体看到不一样的自定义菜单.该接口开放给已认证订阅号和已认证服务号,个性化菜单要求用户的微信客户端版本在iPhone6.2.2,Androi ...

微信公众号开发(5)-调用jssdk获取地理位置经纬度及百度api获得城市

微信公众号开发(5)-调用jssdk获取地理位置经纬度及百度api获得城市相关推荐

最新文章

热门文章