标签：定位，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上肯定是可以的，代码如下：
<template> <view class="app-page-bg"> <view id="container" style="width:100vw;heigth:100vh"></view> </view> </template> <script> let mapPlayer = null; // 生成地图实例 let options = { zoom: 16, // 初始化地图级别 center: [108.921672, 34.250646], } window.mapInit = function() { mapPlayer = new AMap.Map('container', options); }; mounted() { this.loadScrpit(); }, methods: { // 挂载动态js loadScrpit() { var script = document.createElement('script'); script.src = ' https://webapi.amap.com/mapsv=1.4.15&key=你申请的web Key&callback=mapInit'; document.body.appendChild(script); }, } } </script>
但在真机调试以及打包后，这种写法是有问题的，这时候我们需要了解一个视图层的概念，即 renderjs。renderjs 主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。所以涉及到这些的前端类库就无法使用。renderjs 写法也不复杂，就是视图层和逻辑层分开，然后通过DOM来互相传值。
高德webjs在app上的使用如下所示：
<template> <view class="app-page-bg"> <view id="container" style="width:100vw;heigth:100vh"></view> </view> </template> <script> export default { } </script> // 视图层 <script module="test" lang="renderjs"> let mapPlayer = null; // 生成地图实例 let options = { zoom: 16, // 初始化地图级别 center: [108.921672, 34.250646], } window.mapInit = function() { mapPlayer = new AMap.Map('container', options); }; mounted() { this.loadScrpit(); }, methods: { // 挂载动态js loadScrpit() { var script = document.createElement('script'); script.src = ' https://webapi.amap.com/mapsv=1.4.15&key=你申请的web Key&callback=mapInit'; document.body.appendChild(script); }, } } </script>
在uniapp 的 manifest.json 中做如下配置：
（1）打开manifest.json，点击模块配置
要做定位的话需要在App权限配置里面打开如下权限
这时，准备工作就差不多做完了，可以去代码里面试一下定位准不准，这个只能真机调试才能出来。
<template> <view class="app-page-bg"> <view id="container" style="width:100vw;heigth:100vh"></view> <!-- 给视图层传参 --> <view :prop="location" :change:prop="test.getLocationArr"></view> </view> </template> <script> export default { data() { return { location: [] } }, mounted() { this.getlocation() }, method: {// 获取定位 getlocation() { var that = this // #ifdef APP-PLUS uni.getLocation({ type: 'gcj02', geocode: 'true', success: function(res) { console.log(res) that.location = [res.longitude, res.latitude] }, // 定位失败 fail: function(error) { uni.showModal({ title: '提示', content: '获取定位失败，是否授权打开定位', success: (res) => { if (res.confirm) { uni.getSystemInfo({ success: (sys) => { if (sys.platform == 'ios') { plus.runtime.openURL( "app-settings://"); } else { var main = plus.android .runtimeMainActivity(); var Intent = plus.android.importClass( "android.content.Intent" ); var mIntent = new Intent( 'android.settings.LOCATION_SOURCE_SETTINGS' ); main.startActivity(mIntent); } } }) } } }) } }) // #endif }, } } </script> // 视图层 <script module="test" lang="renderjs"> let mapPlayer = null; // 生成地图实例 let options = { zoom: 16, // 初始化地图级别 center: [108.921672, 34.250646], } window.mapInit = function() { mapPlayer = new AMap.Map('container', options); }; mounted() { this.loadScrpit(); }, methods: { // 挂载动态js loadScrpit() { var script = document.createElement('script'); script.src = ' https://webapi.amap.com/mapsv=1.4.15&key=你申请的web Key&callback=mapInit'; document.body.appendChild(script); }, getLocationArr(location ) { if(!mapPlayer) { return } options.center = location // #ifdef APP-PLUS let time = setInterval(() => { // 等待地图挂载后再做其他操作 if (mapPlayer != null) { <!-- 打点，画线，覆盖物 --> clearInterval(time); } }, 100) // #endif }, } } </script>
2.坐标转换
地图坐标系分很多种，高德用得一般是 gcj02，也称火星坐标系，WGS84和2000类似，那我们怎么把WGS84转换成gcj02供高德使用呢，咱们得分两步转换。
1，下载 proj4
npm install proj4 -s
如果不行，试试下面这个
cnpm i proj4 -s
然后在项目中使用
<script> import proj4, { defs } from "proj4" import transformLatLng from './transformLatLng.js' proj4.defs([ [ "EPSG:4545", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs", ], ]); var out_of_china = function out_of_china(lng, lat) { return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); }; data(){ return { location:[ 606352.1267644756,3831640.2720496473 ] } }, mounted() { this.wgs84togcj02(this.location) }, method: { wgs84togcj02(location){ var point = proj4("EPSG:4545", "EPSG:4326", location) let lnglat = transformLatLng(point) return lnglat; }, }
新建一个页面。命名为 transformLatLng.js，内容如下：
var PI = 3.1415926535897932384626; var a = 6378245.0; var ee = 0.00669342162296594323; export function gcj02towgs84(lnglat) { let lng = lnglat[0] let lat = lnglat[1] if (out_of_china(lng, lat)) { return [lng, lat] } else { var dlat = transformlat(lng - 105.0, lat - 35.0); var dlng = transformlng(lng - 105.0, lat - 35.0); var radlat = lat / 180.0 * PI; var magic = Math.sin(radlat); magic = 1 - ee * magic * magic; var sqrtmagic = Math.sqrt(magic); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); var mglat = lat + dlat; var mglng = lng + dlng; return [lng * 2 - mglng, lat * 2 - mglat] } }; export function wgs84togcj02(lnglat) { let lng = lnglat[0] let lat = lnglat[1] if (out_of_china(lng, lat)) { return [lng, lat] } else { var dlat = transformlat(lng - 105.0, lat - 35.0); var dlng = transformlng(lng - 105.0, lat - 35.0); var radlat = lat / 180.0 * PI; var magic = Math.sin(radlat); magic = 1 - ee * magic * magic; var sqrtmagic = Math.sqrt(magic); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); var mglat = lat + dlat; var mglng = lng + dlng; return [mglng, mglat] } }; var transformlat = function transformlat(lng, lat) { var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; return ret }; var transformlng = function transformlng(lng, lat) { var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; return ret }; // 判断是否在国内，不在国内则不做偏移 var out_of_china = function out_of_china(lng, lat) { // var lat = +lat; // var lng = +lng; // 纬度3.86~53.55,经度73.66~135.05 return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); };
如果要做其他类型转换的可以在网上找一找，大抵都差不多。
总结
在这里，uniapp里面使用高德地图就差不多了，剩下的就看官网api就好了。本文仅仅简单介绍了renderjs的传参使用，你们把这个当作js使用就可以了，只是uni.的一些内置方法在里面不管用，得在传统的 <script></script>里面去使用，然后把参数获取方法传到renderjs里面就行了。
