首页 前端知识 uniapp vue中使用高德地图

uniapp vue中使用高德地图

2024-02-01 12:02:41 前端知识 前端哥 26 427 我要收藏

标签:定位,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里面就行了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1031.html
标签
uni-app
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!