uniapp+vue中使用高德地图

Weslie_zt

已于 2023-08-24 18:09:46 修改

阅读量4.9k

点赞数 8

文章标签： uni-app javascript vue.js vue

于 2023-08-24 18:01:27 首次发布

本文链接：https://blog.csdn.net/pleasantsheep_/article/details/132469712

版权

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

前言

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

一、申请高德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里面就行了。

Weslie_zt

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
uniapp+vue中使用高德地图

提示：由于使用的是uniapp，所以没有用使用Android的SDK进行开发，但用到这个的key来进行做定位等uni方面的操作。提示：以下是本篇文章正文内容，下面案例可供参考在这里，uniapp里面使用高德地图就差不多了，剩下的就看官网api就好了。本文仅仅简单介绍了renderjs的传参使用，你们把这个当作js使用就可以了，只是uni.的一些内置方法在里面不管用，得在传统的里面去使用，然后把参数获取方法传到renderjs里面就行了。
复制链接

扫一扫