uniapp实现天地图实时定位巡查、轨迹绘制功能，以及注意点

大家应该都知道，现在这三大地图运营商(高德、百度、腾讯)的商业授权是收费的，全国统一标准 5万/年，所以你想在uniapp中使用地图组件（map），或者使用gcj02 坐标系都是要先给人家钱的，本来我们公司也用了高德地图，奈何甲方没钱了，不愿意一年交5万块钱了，哎，就得把我们公司后台，以及app所有有关高德地图的东西换成天地图，因为天地图是免费的,开源的，地址（）这么倒霉事就落在我头上~。

@一个答布刘

2732人浏览 · 2024-07-10 18:14:48

@一个答布刘 · 2024-07-10 18:14:48 发布

1.背景介绍

2.实现思路

对于巡查功能的实现，我是这样的实现思路，因为map组件收费，所以想通过map组件来展示天地图是不可能的了，所以我这边是通过uniapp的<webview>组件内嵌本地html文件来实现这个功能的，webview相关请参考 web-view | uni-app官网

<template>
	<view style="width: 100%;height:100vh;">
		<web-view src="../../static/html/maps.html">
		</web-view>
	</view>
</template>

3.功能实现及代码

因为我们uniapp的每一个页面都是xxx.vue文件，而天地图需要显示的是一个.html文件，这就涉及到一个问题，因为要实现实时定位功能，就要实现 两个文件相互的通讯，而且通讯要多次且实时的，

1、首先vue文件向html文件传值

vue文件代码

msgFromUniapp(lon, lat, lonlat_list) {
				// 向webview中传参
				const
					_funName = 'msgFromUniapp',
					_data = {
						lon,
						lat,
					};
                //_data就是你发送的数据
				const currentWebview = this.$scope.$getAppWebview().children()[0];
				currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);

	}

html文件代码

window.msgFromUniapp = function(lnglat) {
	console.log('接受的值', lnglat);	
	}

2、html 文件向vue文件传值

html文件代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!-- 	<meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

		<title>开始巡查</title>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你天地图的key">
		</script>

		<style>
			html,
			body {
				margin: auto;
				overflow: hidden;
				-webkit-user-select: none;
				user-select: none;
			}

			.content {
				height: 100vh;
				width: 100vw;

			}

			.maps {
				z-index: 999;
				position: absolute;
				bottom: 10vh;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-between;
			}

			#problem,
			#end,
			#startpatrol {
				color: #ffffff;
				background-color: #557AD6;
				height: 42px;
				border-radius: 5px;
				text-align: center;
				font-size: 15px;
				line-height: 42px;
				position: relative;
				top: 81%;
				display: none
			}
		</style>
	</head>
	<body>
		<!--微信sdk-->
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		
		<!-- 显示地图的DOM节点 -->
		<div id="container" class="content"></div>
		<!-- 创建地图(根据你的需求调整) -->
		<script type="text/javascript">
			var map = null;
			var zoom = 14;
			let center = ''
			let router = ''
			
           //首先要初始化加载
			document.addEventListener('UniAppJSBridgeReady', function() {
          console.log('初始化加载成功')
          //发送消息
         uni.postMessage({
					data: 3
				})
});
		</script>
	</body>


</html>

vue文件代码

<template>
	<view style="width: 100%;height:100vh;">
		<web-view :webview-styles="webviewStyles" @message="handlePostMessage" src="../../static/html/maps.html">
		</web-view>
		
	</view>
</template>
<script>
	
export default {
data(){
  return {
      webviewStyles: {
					width: '100%',
					height: '66%', //66%
				}
   }
},
methods:{

handlePostMessage(event) {
			console.log('html传过来的值'，event)
			}
}
}

</script>

这样以来核心问题就解决了，剩下的就是根据uniapp获取到的定位去向html文件上传值，并在html文件的地图上绘制坐标点以及路线了

3、注意点：

1.html文件路径：

我们自己新建的html文件，本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下，不然访问不到

2.向webView多次传值的时候别用url传：

例：（../../static/H5player_sdk/webplayer.html?video_url=123），这样传一次还可以，你要是多次通过这种方式向webView传值，就会导致加载多次webview组件，导致你返回时候，需要点击多次才可以返回，可以理解为修改url次数=点击返回次数，才能返回上一页面

3.js引用的位置：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">

html文件中，这两个js的引入必须要在 body中，否则可能会导致 document.addEventListener('UniAppJSBridgeReady', function() {});加载不成功，从而也就没发调用uni.postMessage()来向vue文件发送消息，会报出uni 为undefined