Html5中如何解决定位问题(html5,开发技术)

目标与分析

我们的目标是经过封装之后，只需要调用一个方法就可以拿到返回的位置信息。

我们需要做的事情是，针对不同的端（微信H5和其他浏览器环境）封装不同的类，再通过一个方法通过 UA 区分，调用不同环境对应的类获取位置。

在微信内部，经过反复的实践之后，不论是通过原生的 HTML5 定位，还是通过第三方(如百度或腾讯地图) jsapi 获取位置，不仅定位时间长，甚至经常出现定位失败的情况，严重影响用户体验，尤其对于大部分信息流都依赖于用于位置的商城首页来说，是完全无法接受的。所以在微信内我们只有微信 sdk 这一种选择；

而对于浏览器端，通过第三方的地图 jsapi 或定位组件，可以稳定且较快速地获取位置信息，为了与微信内尽量保持一致，我们选择的是腾讯地图 jsapi。

解决方案

Talk is cheap, show me the code. 废话不多说，直接上代码：

1. 在浏览器中，通过腾讯地图jsapi获取位置

1.1 在项目的 html 模版文件中引入腾讯地图 jsapi：

说明：

使用腾讯地图 jsapi, 需要先去腾讯地图开放平台申请自己的账号，然后创建自己的应用，将腾讯地图key 和创建的应用名称替换上面的值。

1.2 调用获取位置接口，获取位置信息

为了方便复用，我们单独封装一个腾讯地图 jsapi 的类，命名为 tMap.js

2. 在微信 webview 中, 通过微信sdk获取位置信息

2.1 微信 js-sdk 相关的准备工作
2.1.1 引入js文件

2.1.2 注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。通常是通过后台接口获取配置信息。

2.2 调用 api 获取位置信息

2.3 根据不同运行环境调用不同的定位方法

3. 页面调用

3.1 绑定方法到 Vue 原型上：

3.2 在页面组件中调用：

总结

遇到的坑以及需要注意的点：

使用微信sdk获取位置信息需要按顺序完成以下步骤：

异步加载微信sdk

通过接口获取配置信息，配置微信sdk

在wx.ready回调中调用方法

必须严格按顺序完成以上的三个步骤，否则是无法调用微信sdk的功能的。