前言：

最近在开发一个在企业微信执行的模块，起初我以为企业微信不是个APP吗，那不是要写APP了。

后面才知道直接写页面对接好，交给后台操作一下就可以在企业微信上执行了。

实现功能：

签到显示当前位置。

实现框架和工具：

vant

百度地图  (后改为腾讯地图)

微信js-sdk

问题：

在说解决方法的之前，先说说我在实现签到过程中遇到的问题！

之前，我还没有用到微信js-sdk的api,是直接使用百度地图的定位获取用户的经纬度，然后根据经纬度去调用百度地图的逆地址解析接口。

结果发现一个很狗血的问题，定位出来的地点在苹果手机上是准确的，但在安卓上就差了几十公里远。后来无论如何查询都没有办法。只能选择微信的js-sdk来实现这个功能。

接下来详细的讲讲这个功能的开发和一些开发过程中的问题。

实现：

首先，整个签到的功能逻辑是很清晰的。

第一：利用微信js-sdk获取用户的经纬度。

第二：利用百度地图将经纬度转为地址（过程还是有点坎坷）

步骤一：利用微信js-sdk获取用户的经纬度

1、首先我们要在vue中引入微信js-sdk

      npm i -S weixin-js-sdk

2、在页面中引入

      import wx from 'weixin-js-sdk'

3、配置wx.config

wx.config

我在使用微信js-sdk的时候，最大的烦恼就是不知道怎么在vue页面上用。所以我记录一下这个方法。

和小程序差不多，但是我一直纠结的是，如果在vue里面写，我是应该在哪个生命周期上配置这个config吗？

后来查了一下才知道，其实我们可以直接写在函数里面，在使用的时候再去配置也是可以的。

或者在created生命周期上就配置好，那么后面也不用在进行配置了。(这里我理解的大概是这样，毕竟我只是调用了它的一小块功能而已)

1、首先，这些配置是通过后台获取的。

调用接口获取必选配置

2、在页面初始化时调用

调用

以上就是我们配置的方法。

配置结束之后，我们就可以调用SDK里面的方法。

下图是我签到的样式部分。

签到部分

下图是方法。

在看方法的时候，先讲一点比较重要的。

wx.getLocation是SDK里面的方法，想要调用方法必须在一开始的我们配置的那里配置好我们要使用的方法，才可以使用，例如：

在jsApiList中配置好

签到的方法，

3、上面基本是所有的使用部分。接下来再分析签到功能

首先，我们调用微信SDK的目的只是为了拿到经纬度。

但在此之前，我们还是要调用百度地图，在我使用百度地图的时候遇到一点问题。如果你的请求是在开始前操作的。也就是页面初始就要获取到经纬度和位置，你可能会发现百度地图你引用不了。原因是可能经纬度拿到了，但是百度地图还没有加载完。

所以我们可以先加载百度地图。

MP方法

map.js

定义一个方法用来引入百度地图

在页面初始化时执行

这个时候，我们就已经加载了百度地图了。

当点击签到的时候，开始调用微信的SDK方法。

通过wx.getLocation可以获取到经纬度。

然后通过调用getAddress() 把经纬度交给百度地图转为地址

获取经纬度

在调用getAddress之前，我们还会有一个坑，那就是微信的sdk使用的gps定位，但百度地图时用百度地图自己设置的定位方式，我们可以通过gcoord来转换。

GitHub - hujiulong/gcoord: 地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转

通过 npm install gcoord --save 引入转为工具

在页面中引入

转换为地址

补充：

在我基本确认这个功能没问题的时候，甲方在签到的时候发现了还有十几米左右的误差(虽然我这边没有)。

后面直接该用腾讯地图进行逆地址转换。

因为高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系，通过企业微信获取的经纬度是不需要特殊转码的。因为他也是根据GCJ-02的坐标系的。

但是，BD-09（Baidu, BD）是百度地图使用的地理坐标系，其在GCJ-02上多增加了一次变换，用来保护用户隐私。从百度产品中得到的坐标都是BD-09坐标系。

所以，

最终还是用了腾讯地图来确保位置的精确

以上就是我们所有的内容

（写的东西相当冗长，可能不过精简，之前一些文章其实只是要写给自己看的，但在很多开发过程中，别人的文章总能给我一些启发和思路，所以把自己遇到的问题保留下来，希望也可以给未来的自己或者其他同学一些帮助）