微信公众号:地图定位
相关环境:微信公众号+百度地图
需求:需要在页面上实现,点击落图按钮——》定位当前位置(获取经纬度)——》通过百度地图显示
内容:
做这个功能之前,并未接触过百度地图还有微信公众号开发之类的,所以即便突击学习了一下,也不太了解。
1.微信接口定位+百度地图显示位置(成功)
开始做的时候,由于微信只是刚接触,虽然知道微信有定位的接口,但是还是先去尝试了百度地图的定位和h5的定位,结果当然是失败(后面会总结一下失败的经验),最后尝试的使用微信公众号定位接口获取当前坐标+百度地图显示位置的方式才成功搞定,
//这就是微信获取地理位置的接口,官方文档,百度资料一大堆
function getwxlocal(){
wx.getLocation({
success: function (res) {
var point=new BMap.Point(res.longitude , res.latitude);
//使用百度接口对h5定位坐标进行坐标转换0-》4
BMap.Convertor.translate(point,0,translateCallback);
//alert("获取地理位置成功,经纬度为:(" + res.latitude + "," + res.longitude + ")" );
//alert(JSON.stringify(res));
},
cancel: function (res) {
$.alert('用户拒绝授权获取地理位置',"提示");
}
});
}
//坐标转换完之后的回调函数方法
function translateCallback(point) {
initMap(point.lng,point.lat);//用得到的经纬度初始化地图
}
2.百度地图的api进行实时定位(失败)
测试遇到了一些问题:
(1)定位位置偏移严重(室内偏移-正常)
虽然不太了解地图,但是一看到功能需求的时候,就想到了使用百度地图的api进行定位,第一次点击按钮,垮。。。成功了,可以定位,但是偏的几百米,偏了几百米,感觉挺严重的,拼命研究各种方法,什么百度的纠偏接口,纠偏算法,一点用也没有。
咋办啊,愁死了,跟一个同事说起的时候,答案居然是正常的,手机的定位的基于卫星还有基站的什么的(了解不多),所以在室内进行测试的时候,偏移是很正常的,好吧,虽然很郁闷,但是知道原因了。后来在室外测试确实没问题,这个问题算是解决了。
(2)无法进行第二次定位(app才有实时定位),(但是如果打开手机上的地图app,后台运行,公众号内的实时定位就完全没问题了)
一开始定位完,没发现问题,但是在回家的路上,我开着微信,打开网页,按钮那么一按,问题出来了,咋还是公司的位置,一直刷一直刷,没有用还是公司的位置,没办法,放弃了,打算回公司再看一下情况,过了几个小时,心血来潮,定位按钮一按,成功了。要喷血啊,这是咋回事,开始疯狂查资料,百度没找到,谷歌没找到,每次定位完,都要好久才可以再定位一次,这显然是不行的。找来找去,在只言片语中发现,一句话,百度地图只支持在app程序中实现实时定位,在网页上只能是过好久才能定位一次(当然我现在也不知道真的假的?),反正我是实现不了,姑且当他是真的。那使用百度地图实现实时定位的方法,就没有用了。(本方法宣告失败)
百度定位代码 (定位一次后,许久才能定位一次)//百度定位当前位置 --与h5定位类似(根据h5定位做的)
var geolocation = new BMap.Geolocation();
function getLocal(){
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
initMap(r.point.lng,r.point.lat);//定位完获取经纬度,初始化地图
} else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
3.h5定位实现实时定位(失败)
百度地图实时定位的方法失败后,就开始找其他方法了,百度了一下,h5定位的方法例子一大堆,高兴了一下,还以为有解决方案了,但是最终还是失望了。
由于h5的定位和百度定位很相似(网上是说百度定位是根据h5定位做的),反正是失败了,与百度定位一样过好久才能实现一次定位,(一样也是打开手机上的地图app,实时定位就可以实现)
//h5定位代码
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
str= "Geolocation is not supported by this browser.";//浏览器不支持定位
} }
function showPosition(position) {
str = "Latitude: " + position.coords.latitude+ "<br />Longitude: " + position.coords.longitude;//经纬度
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
str= "User denied the request for Geolocation.";//用户不允许地理定位
break;
case error.POSITION_UNAVAILABLE:
str= "Location information is unavailable.";//无法获取当前位置
break;
case error.TIMEOUT:
str= "The request to get user location timed out.";//操作超时
break;
case error.UNKNOWN_ERROR:
str= "An unknown error occurred.";//未知错误
break;
} }
4.h5跟踪定位实现实时定位(尝试失败,勉强可一用)
百度和h5定位失败后,突发奇想使用h5的跟踪定位实现,跟踪定位大概每过几十秒自动定位一次,但是我要的功能是点击按钮采取定位,所以想通过跟踪定位看能不能实现,大概想了几个方案:
(1)点击定位按钮,删除当前跟踪定位,重新建一个,然后定位,但是跟普通定位一样失败了,还是只能几十秒定位一次
(2)跟踪定位在后台运行,每定位一次,把坐标存到一个变量里面,点击定位按钮的时候,直接去取坐标,然后定位显示到百度地图上,当然这种方法虽然还是几十秒才能定位一次,但是在需要的时候去取坐标,且几十秒的时间,人大概也移动不了多远,满足基本的需求是足够了,但是想一想还是排除,感觉用在实时定位上还是很不合适。
//h5跟踪定位代码
function getLocal(){
if(loc!=null){ loc=null; }
loc=window.navigator.geolocation;
if (loc) {
if(watchID!=null){ watchID=null; }
watchID=loc.watchPosition(showPosition,showError);//h5跟踪定位
if(currentID!=null){ currentID==null; }
//h5当前位置定位
currentID=loc.getCurrentPosition(showPosition,showError,{provider:'baidu'});
}else {
alert("该浏览器不支持定位。");
}
}
微信公众号:地图定位相关推荐
- vue 微信公众号获取定位经纬度 腾讯地图逆地址解析为具体地址
最近做项目需要用到 微信公众号获取定位,并将定位转换为具体地址的需求,找了挺多,最后整理下,分享给大家~ 我这里使用的是腾讯地图,也可以使用其他的如百度.高德等. 思路是,先使用微信开放文档的获取定位 ...
- 【安信可NB-IoT模组EC系列应用笔记⑤】安信可微信公众号北斗定位显示EC-01F+GP-01模组
文章目录 前言 一.硬件组成与接线 1.硬件准备 2. 接线 二.固件准备及烧录 1.固件准备 2.固件烧录 三.定位信息获取及显示 四.AT指令更换MQTT服务器 1.AT 指令说明 2. 使用方法 ...
- 开启微信公众号定位服务器,微信公众号的定位是怎样的?
现在很多的商家为了让自己的生意越做越好,所以他们都会有着属于自己的微信号,这样不但能够让他们有着一个更好的宣传方式,也能够让他们通过这个平台来把自己的事业发展得更大,毕竟现在网络是一个很好的平台,如果 ...
- 微信公众号获取定位地图(有经纬度)
先配置参数: jsApiList: ["openLocation"] 重点:parseFloat() 必须要用这个转换一下 不然调不起来! la =parseFloat(dat ...
- uniapp开发微信公众号H5 定位功能
获取定位 /**引入SDK*/ import QQMapWX from 'qqmap-wx-jssdk.js路径'data() {return {qqMap: new QQMapWX({key: '腾 ...
- 微信公众号js-sdk定位 获取经纬度和详细位置
使用步骤请参考微信开放文档JS-SDK说明文档中的JSSDK使用步骤 <!DOCTYPE html> <html lang="en"> <head&g ...
- SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
- 高德,微信公众号,企业微信获取定位
微信公众号开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 高德文档:https://lbs.ama ...
- 怎样申请微信公众号/如何开通微信订阅号
第一步:搞清楚微信公众订阅号.服务号的区别 首先要告诉大家的是,定位和用途的不同是区别的本质.微信公众平台是个平台,提供给运营者,而运营者通过这样一个平台大家微信公众号为微信用户提供资讯和服务.看到了 ...
- 想要运营公众号?公众号形象定位有哪些?
想要运营公众号? 公众号形象定位 有哪些? 微信公众号对外会有一个形象,这个形象的塑造是为了进一步让用户的大脑形成品牌影像,从而引导用户行为.所以,我们在运营公众号的时候,要做的第一件事情就是要对公众 ...
最新文章
- Unity各个版本的离线文档下载和配置方法
- C#LeetCode刷题之#404-左叶子之和​​​​​​​​​​​​​​(Sum of Left Leaves)
- Hive 导数据到本地(2种方式)
- SQLite学习总结(2)——使用Java操作SQLite
- Intel CPU 曝两个新漏洞影响所有处理器,设备可遭接管(含视频)
- Oracle 数据文件 实际使用量 计算说明
- idm下载百度网盘有限制 提示403错误 下载显示没有权限404,最新的解决办法教程
- vue使用高德地图API,定位,搜索,拖拽选址
- linux更改445端口,windows连接非445端口(nginx转发)的samba服务卡顿
- 大麦支持选座位、定时等功能
- case 书写的要求与思路
- 噪声,白噪声,加性噪声和乘性噪声
- python创建Excel表格
- 第10章 物理安全要求
- 第二人生的源码分析(二十六)底层网络协议
- 机器学习之二:回归分析
- Android仿微信图片编辑库,你想要的功能这里都有
- 2.8.1 矩阵的合同
- 最新kali之swaks
- 头歌--C++ 面向对象 - STL 的应用