H5定位终极解决方案
H5定位终极解决方案 背景 做一个H5的微商城,主要在微信内,但也要考虑到其他浏览器。其中,首页需要根据当前用户的经纬度找到距离最近的门店并展示。前端需要做的工作就是获取用户的经纬度然后查询后台接口并渲染页面。 目标与分析 我们的目标是经过封装之后,只需要调用一个方法就可以拿到返回的位置信息。 我们需要做的事情是,针对不同的端(微信H5和其他浏览器环境)封装不同的类,再通过一个方法通过 UA 区分,调用不同环境对应的类获取位置。 在微信内部,经过反复的实践之后,不论是通过原生的 HTML5 定位,还是通过第三方(如百度或腾讯地图) jsapi 获取位置,不仅定位时间长,甚至经常出现定位失败的情况,严重影响用户体验,尤其对于大部分信息流都依赖于用于位置的商城首页来说,是完全无法接受的。所以在微信内我们只有微信 sdk 这一种选择; 而对于浏览器端,通过第三方的地图 jsapi 或定位组件,可以稳定且较快速地获取位置信息,为了与微信内尽量保持一致,我们选择的是腾讯地图 jsapi。 解决方案 Talk is cheap, show me the code. 废话不多说,直接上代码: 在浏览器中,通过腾讯地图jsapi获取位置 1.1 在项目的 html 模版文件中引入腾讯地图 jsapi <!-- index.html --> <script charset="utf-8" src="