目的：

在微信公众号页面调用本地定位，完成路线导航功能

存在的坑：

经过开发测试发现，百度地图定位api兼容ios，在安卓手机上会导致浏览器定位失败从而调用ip定位，即定位所在城市（市级）
腾讯地图定位api对微信版本有要求，如图：

如图所示在微信7.0以后需要https协议，经测试发现https协议后定位api兼容安卓，但是ios会出现比较大的偏差

解决方法：

添加js判断，ios系统使用百度定位，安卓系统使用腾讯定位，然后根据坐标转换api转换为百度坐标

系统判断：

 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {//ios系统bdPositon(); //调用百度定位} else{//安卓和Pc  调用腾讯定位}

百度定位：

//百度定位
function bdPositon(){//检查浏览器是否支持地理位置获取if (navigator.geolocation) {//若支持地理位置获取,成功调用showPosition(),失败调用showPositionError//var config = { enableHighAccuracy: true, timeout: 3000, maximumAge: 30000 };//navigator.geolocation.getCurrentPosition(showPosition,showPositionError,config);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {myPoint = r.point;} else {console.log('failed' + this.getStatus());}}, {enableHighAccuracy : true})} else {console.log("Geolocation is not supported by this browser.");}
}

腾讯定位及坐标转换：
腾讯定位这里通过内嵌一个隐藏iframe的方式调用该组件，详情见https://lbs.qq.com/tool/component-geolocation.html调用方式二

var txKey = "2JXBZ-I7L34-VM4U7-DTPXW-GL453-AGBFZ";
var iframe = '<iframe id="geoPage" width="0" height="0" frameborder=0 scrolling="no" src="https://apis.map.qq.com/tools/geolocation?key='+txKey+'&referer=myapp&effect=zoom" allow="geolocation" style="position:absolute;z-index:-1"></iframe>';
$("html").append(iframe);
$(function(){window.addEventListener('message', function(event) { // 接收位置信息var loc = event.data;//坐标转换，callback=showLocation为回调处理函数var url = 'https://api.map.baidu.com/geoconv/v1/?coords='+loc.lng+','+loc.lat+'&from=3&to=5&ak=' + bdKey + '&callback=showLocation&s=1';jQuery.getScript(url);}, false);
})
//调用百度转换api回调函数
function showLocation(res){var position = res.result[0];  //保存坐标
}

完整代码：

需引入jquery和百度api.js，特别注意要引入https协议的api文件，且在末尾缀上&=1

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=C93b5178d7a8ebdb830b9b557abce78b&s=1"></script>

var txKey = "2JXBZ-I7L34-VM4U7-DTPXW-GL453-AGBFZ";   //设置腾讯地图的key
var bdKey = "C93b5178d7a8ebdb830b9b557abce78b";     //设置百度地图的key
var iframe = '<iframe id="geoPage" width="0" height="0" frameborder=0 scrolling="no" src="https://apis.map.qq.com/tools/geolocation?key='+txKey+'&referer=myapp&effect=zoom" allow="geolocation" style="position:absolute;z-index:-1"></iframe>';
$("html").append(iframe);
$(function(){//判断是否已定位if(getCookie("dotlat_y") == null || getCookie("dotlng_x") == null){if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {//ios系统bdPositon(); //调用百度定位} else{//安卓和Pc  调用腾讯定位window.addEventListener('message', function(event) { // 接收位置信息var loc = event.data;var url = 'https://api.map.baidu.com/geoconv/v1/?coords='+loc.lng+','+loc.lat+'&from=3&to=5&ak=' + bdKey + '&callback=showLocation&s=1';jQuery.getScript(url);}, false);}}else{window.position = {x : getCookie("dotlng_x"),y : getCookie("dotlat_y")}}
})
//调用百度转换api回调函数
function showLocation(res){var position = res.result[0];setCookie("dotlat_y",position.y);setCookie("dotlng_x",position.x);window.position = position;  //暴露出来
}
// 设置cookie
function setCookie(name,value){document.cookie = name + "="+ escape (value) + ";path=/;"
};//百度定位
function bdPositon(){//检查浏览器是否支持地理位置获取if (navigator.geolocation) {//若支持地理位置获取,成功调用showPosition(),失败调用showPositionError//var config = { enableHighAccuracy: true, timeout: 3000, maximumAge: 30000 };//navigator.geolocation.getCurrentPosition(showPosition,showPositionError,config);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {myPoint = r.point;setCookie("dotlat_y",myPoint.lat);setCookie("dotlng_x",myPoint.lng);window.position = {x : myPoint.lng,y : myPoint.lat}} else {console.log('failed' + this.getStatus());}}, {enableHighAccuracy : true})} else {console.log("Geolocation is not supported by this browser.");}
}

微信公众号关于百度地图和腾讯地图本地定位api的调用（js）相关推荐

vue开发的微信服务号H5内嵌的腾讯地图和导航
##需要后台配合拿到微信网页开发的sdk签名https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1 成功 ...
百度云盘搜索引擎微信公证号_微信公众号被百度搜索引擎收录？SEO优化诞生新方法！...
用"site:mp.weixin.qq.com"这条指令,可以检验各大搜索引擎对微信公众平台文章的收录情况. 下面就以百度为例,具体讲讲如何来操作吧. 被百度搜索收录 1.内容源同 ...
微信公众号插入百度地址导航功能
一键导航代码示例: http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:嗨,我是坐标;title:嗨,我是导航标题;addr: ...
深入浅出微信公众平台实战开发（微网站、LBS云、Api接口调用、服务号高级接口）
本课程按知识点划分,共100小节,每小节时间不等,请学员注意! 一.本课程是怎么样的一门课程(全面介绍) 1.1.课程的背景微信公众平台的火热程度已经不用多言,无论是个人还是企业,政府还是商家 ...
微信公众号删除cookie失败，cookie设置了过期时间不管用，微信公众号cookie比较诡异，删不掉，解决办法，原生JS封装cookie统一操作删除cookie，读取cookie，删除cookie
公司有个项目,需求是这样的: pc 端的项目,有一个步骤可以在手机上操作,页面都在同一个域名下面,但是pc端需要登录(用到了 cookie ),公众号端不需要登录(不用 cookie ) ,不清楚服务 ...
今日嗅评：搜狗可以搜索微信公众号了，是被腾讯派来探路的吧
今日头条之惑:法律.商业和创新的矛盾阑夕投稿:今日头条自我标榜的"导流",其实是搜索引擎干的活儿.盗版图书不能因为它比正版图书的装帧更加精美,就自认为获得了天然的合法性:而传统媒 ...
微信公众号获取的实时坐标和高德地图坐标系的转换
refs: 1) https://blog.csdn.net/dragon974539495/article/details/78894499 2) https://www.jianshu.com/p ...
微信公众号-通用百度翻译代码实现
TransApi package com.camel.ssm.util;import java.util.HashMap; import java.util.Map;//通用翻译api public ...
微信公众号最佳实践（ 9.6）地图导航
地图导航随着交通经济的发展,人们的活动区域越来越大,不认识路,找不到目的地的情况也屡有发生,地图导航的功能可以帮用户导航到目的地. 高德地图高德地图是中国领先的数字地图内容,导航和位置服务解决方案 ...

微信公众号关于百度地图和腾讯地图本地定位api的调用（js）

目的：

存在的坑：

解决方法：

完整代码：

微信公众号关于百度地图和腾讯地图本地定位api的调用（js）相关推荐

最新文章

热门文章