uniapp+vue中使用高德地图

标签：定位，uniapp使用高德，坐标转换

---

前言

由于使用的是uniapp，所以没有用使用Android的SDK进行开发，但用到这个的Android key来进行做定位等uni方面的操作。

---

目录

文章目录

前言

二、使用步骤

1.在uniapp项目中使用高德

2.坐标转换

总结

---

一、申请高德key

1，去高德官网，点击 控制台—应用管理—我的应用，然后点击创建应用，如下图：

 应用名称  和  应用类型可以随你自己填写，没有什么明确的规定。

2，应用建好之后，点击添加key，表单内容如下图填写就好，key名称 随便填。

 3，还需要申请Android的key，步骤如下：

（1），再次点击添加key，然后选择Android平台，

 （2）获取安全码SHA1，第一种比较直接的就是进入 Dcloud开发者中心，然后在里面找到你的项目，点击进去，查看证书，如下图

 如果没有，就创建证书，这个证书后续还需要用作打包发行的。

 

 然后查看详情可以看到里面有生成的  SHA1 安全码，证书密码和下载证书是发行—云打包时选择使用自由证书时用的。

插个题外话 打包配置

二、使用步骤

1.在uniapp项目中使用高德

直接创建使用高德在H5上肯定是可以的，代码如下：

 但在真机调试以及打包后，这种写法是有问题的，这时候我们需要了解一个视图层的概念，即 renderjs。renderjs 主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。所以涉及到这些的前端类库就无法使用。renderjs 写法也不复杂，就是视图层和逻辑层分开，然后通过DOM来互相传值。

高德webjs在app上的使用如下所示：

// 视图层

 在uniapp 的 manifest.json 中做如下配置：

 （1）打开manifest.json，点击模块配置

 要做定位的话需要在App权限配置里面打开如下权限

 这时，准备工作就差不多做完了，可以去代码里面试一下定位准不准，这个只能真机调试才能出来。

// 视图层

2.坐标转换

地图坐标系分很多种，高德用得一般是 gcj02，也称火星坐标系，WGS84和2000类似，那我们怎么把WGS84转换成gcj02供高德使用呢，咱们得分两步转换。

1，下载 proj4

 npm install proj4 -s

如果不行，试试下面这个

cnpm i proj4 -s

然后在项目中使用

里面去使用，然后把参数获取方法传到renderjs里面就行了。