Vue通过微信定位+百度地图获取详细地理位置信息

项目中需要使用到定位功能，定位用户所在的省市，并自动填充到省市的选择列表中，微信开发中，定位功能直接使用微信提供的接口，方便并且简单，兼容性相对好处理

因为微信定位或者百度地图的定位都是先通过定位获取到用户的经纬度，然后需要再通过经纬度获取用户的详细地理位置信息。

一、在vue中需要安装jssdk

配置安全域名（参考官方文档）
引入微信的js文件，vue中可以直接npm安装也可以
npm install weixin-js-sdk --save
并在main.js中引入js：
import wx from ‘weixin-js-sdk’
并且将wx绑定到vue原型上，那么其他的所有组件都可以使用：
Vue.prototype.$wx = wx

通过config接口注入权限验证配置
在main.js中配置微信获取地理位置的权限接口

wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1// 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口// 这里配置获取地理位置所需要的接口权限jsApiList: ['openLocation','getLocation']
});wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});

二、进行定位

直接在需要获取用户定位的组件中通过下面的代码就可以进行定位，获取用户的经纬度


// 最好是在ready函数中执行微信的接口
this.$wx.ready((res) => {this.$wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。var speed = res.speed // 速度，以米/每秒计var accuracy = res.accuracy // 位置精度console.log('纬度：' + this.latitude + '经度：' + this.longitude + 'accuracy：' + accuracy)},fail: function(res) {console.log(JSON.stringify(res))}})})

三、通过经纬度获取详细位置信息

这里通过百度地图的api来逆序，通过经纬度获取定位的详细信息，也可以通过腾讯地图，高德地图等，参考各自官方的开发文档即可

引入百度地图的js（去官方申请免费的key即可）
在vue项目的index.html中引入即可：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<申请的key>"></script>
通过百度地图转换经纬度为地理信息

     let point = new BMap.Point(this.longitude, this.latitude)let gc = new BMap.Geocoder()gc.getLocation(point, function(rs){const addComp = rs.addressComponents// 可以通过addComp对象获取到省、市、县、区、街道多少号等信息const province = addComp.provinceconsole.log('addComp json: ' + JSON.stringify(addComp))console.log('province' + addComp.province)})

所以，将微信定位和百度地图的代码整理，获取地理位置：

在浏览器控制台和IDE中，可能会报BMap未定位警告，没有关系，可以正常使用


const _this = this
this.$wx.ready((res) => {this.$wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {_this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90_this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。var speed = res.speed // 速度，以米/每秒计var accuracy = res.accuracy // 位置精度console.log('纬度：' + _this.latitude + '经度：' + _this.longitude + 'accuracy：' + accuracy)let point = new BMap.Point(res.longitude, res.latitude)let gc = new BMap.Geocoder()gc.getLocation(point, function(rs){console.log(rs)const addComp = rs.addressComponents// 获取省份const province = addComp.provinceif(province) {// 如果这里需要操作this,那么需要在外部重新绑定一下this// _this.provinceName = province}alert('addComp json: ' + JSON.stringify(addComp))console.log('province' + addComp.province)})},fail: function(res) {console.log(JSON.stringify(res))}})})

Vue通过微信定位+百度地图获取详细地理位置信息相关推荐

android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
JS 通过百度地图获取详细地址及经纬度
下方代码可以通过百度地图获取到经纬度和详细位置地址注意: <script type ="text / javascript"src ="http://api.ma ...
通过百度地图获取当地天气信息
首先,通过之前用过的百度地图,实现定位功能:首先去百度开放云申请密钥,这里就不说明申请过程了,不懂得可以百度一下. 申请完密钥后,需要去声明Activity的地方添加上下面的语句: [html] vi ...
百度地图获取规划路径信息
本文意在解决通过制定两点坐标获取百度搜索的路径结果信息,用途是重现路径(比如在mapv上绘制轨迹显示效果图等). 实现思路: 加载百度地图所需的js引用: html布局用于显示结果: 初始化百度地图并 ...
python百度地图显示路径_百度地图获取规划路径信息
本文意在解决通过制定两点坐标获取百度搜索的路径结果信息,用途是重现路径(比如在mapv上绘制轨迹显示效果图等). 实现思路: 加载百度地图所需的js引用: html布局用于显示结果: 初始化百度地图并 ...
微信企业号开发:微信考勤百度地图定位，错误修正
在使用百度地图进行微信考勤时,遇到很多问题,尤其是定位问题,我知道定位有偏差,但使用百度地图,几十次后,偶尔一次会错的离谱,例如直接就定位到了外省,例如我一直在西安,一次定位到了天津,一次定位到了石家 ...
微信企业号开发:微信考勤百度地图定位，错误修正二
在之前的博客中微信企业号开发:微信考勤百度地图定位,错误修正介绍了一种修正百度地图错误的方法,就是使用高德地图修正.但经过近一年.近两千人的使用发现,在百度地图出现定位错误时,通过HTML5获取的经纬 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...

Vue通过微信定位+百度地图获取详细地理位置信息

Vue通过微信定位+百度地图获取详细地理位置信息相关推荐

最新文章

热门文章