目的：

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

存在的坑：

经过开发测试发现，百度地图定位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的方式调用该组件，详情见/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./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./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="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="https://api./api?v=2.0&ak=C93b5178d7a8ebdb830b9b557abce78b&s=1"></script>

var txKey = "2JXBZ-I7L34-VM4U7-DTPXW-GL453-AGBFZ"; //设置腾讯地图的keyvar bdKey = "C93b5178d7a8ebdb830b9b557abce78b";//设置百度地图的keyvar iframe = '<iframe id="geoPage" width="0" height="0" frameborder=0 scrolling="no" src="https://apis./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./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; //暴露出来}// 设置cookiefunction 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.");}}