微信公众号使用H5获取地理位置信息并定位

该定位功能是使用百度地图的API实现的。

首先需要在百度地图的开发平台中申请一个AK码。

然后再html中引入百度地图API

<script src="http://api.map.baidu.com/api?ak=你申请的AK码&v=2.0&services=false"></script>

最开始我是使用的下面这种写法借鉴的一个前辈的博客（https://www.cnblogs.com/liuxiaofan/p/4864681.html）：

 1 navigator.geolocation.getCurrentPosition(function (position) {
 2         var lat = position.coords.latitude;
 3         var lon = position.coords.longitude;
 4         var point = new BMap.Point(lon, lat);  // 创建坐标点
 5         // 根据坐标得到地址描述
 6         var myGeo = new BMap.Geocoder();
 7         myGeo.getLocation(point, function (result) {
 8             var city = result.addressComponents.city;
 9             $('body').html(city);
10         });
11     });

我自己是安卓手机测试是OK的能定位到区级。

上线后发现安卓可以定位，苹果不能，又查看网上资料发现navigator在IOS进行被限制，在IOS10版本中只有https协议的才能使用navigator否则定位失效。

如果你遇到这种情况，有两种解决方法：

1，将自己的网站升级成https协议的。

2，使用百度地图自己的Geolocation，具体如下

 var geolocation = new BMap.Geolocation();   geolocation.getCurrentPosition(function (r) {   if (this.getStatus() == BMAP_STATUS_SUCCESS) {    var mk = new BMap.Marker(r.point);    currentLat = r.point.lat;    currentLon = r.point.lng;     var pt = new BMap.Point(currentLon, currentLat);    var geoc = new BMap.Geocoder();    geoc.getLocation(pt, function (rs) {    var addComp = rs.addressComponents;    var city = addComp.city;  location.href="/getPosition?cityName="+city;

         });       }   });

微信公众号使用H5获取地理位置信息并定位相关推荐

微信公众号，JS-SDK获取位置信息，并调起第三方地图App导航
微信公众号关联网页获取位置信息,可以参照<微信公众平台技术文档>-> 微信JS-SDK说明文档,官方链接地址:https://mp.weixin.qq.com/wiki?t=reso ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
微信公众号开发之获取用户信息
微信获取用户信息的方式有两种,静默授权(无需用户同意)和非静默授权(需要用户" 手动点击 "拉取授权,可以用户无需关注公众号即可获取用户信息) 整体的代码请查看最后,前边为原理介绍 ...
微信公众号接入和获取用户信息
主要原理: 1.从微信公众号发来的get请求为验证服务器安全性的 2.从微信公众号发来的post请求为接受和回复用户信息的 3.先根据是否有code来进行判断,如果有code的话,根据code换取op ...
微信公众号授权（获取用户信息）
需要的工具: 微信公众号(可以申请,但做开发的,可以申请测试号,申请详细不多说了) 服务器(可以自行购买,我使用的是新浪的sae.) 编辑器(随意,不做推荐) 微信公众号开发文档(地址) !!!!!完 ...
java实现微信公众号授权登录获取用户信息(一)
参考文章:https://blog.csdn.net/Santiago_M/article/details/79109154 : https://www.cnblogs.com/jilu/p/6123 ...
微信公众号：h5获取code，授权等问题
前端引入微信的sdk,按着文档获取code,最后获取openID.AppID.答题思路是这样,但是有时候需求不是这么搞的,尤其是获取code,微信URL会重定向,体验非常不好. 如果页面中,有不同的地 ...
基于Spring Boo微信公众号授权登录获取用户信息（附带完整源码）
简介微信公众号开发中,必不少可少的一环:公众号授权登录.获取微信用户信息. 本地完整运行环境准备内网渗透=>生成本地指定端口映射的外网域名传送门:内网渗透工具Natapp使用详解域名生成 ...
微信公众号网页授权获取用户信息的流程
官网文档网页授权流程分为四步: 引导用户进入授权页面同意授权,获取code 通过 code 换取网页授权access_token(与基础支持中的access_token不同)(我的需求只需要到第二部 ...

微信公众号使用H5获取地理位置信息并定位

微信公众号使用H5获取地理位置信息并定位相关推荐

最新文章

热门文章