如何在uniapp中引入天地图，并实现uni页面与webview页面的通讯

由于三大地图运营商开始统一收费，暂时还没决定使用那个，先使用天地图顶顶，天地图在uniapp里面没有Maps的权限，使的用起来并没有那么方便。通过网上查找方法实现uniapp中嵌入天地图，测试下来发现只有内嵌h5的方式能够实现天地图（可能是个人问题哈）然后去创建我们的webview页面tmap.vue，页面中的@message是用来与h5页面通讯的方法。由于是两个不同页面之间的通讯，要用到uni.

Q10_01Q

2132人浏览 · 2023-06-20 16:46:04

Q10_01Q · 2023-06-20 16:46:04 发布

概述

由于三大地图运营商开始统一收费，暂时还没决定使用那个，先使用天地图顶顶，天地图在uniapp里面没有Maps的权限，使的用起来并没有那么方便。通过网上查找方法实现uniapp中嵌入天地图，测试下来发现只有内嵌h5的方式能够实现天地图（可能是个人问题哈）

功能需求：gps定位发送位置以及选择地址发送

<view class="gl-location">
		<u-button class="gl-location-get" size="mini" @click="getLocation">发送定位</u-button>
		<u-button class="" size="mini" @click="chooseLocation">选择地址</u-button>
</view>

//位置获取
async function getLocation() {

  uni.getLocation({
    success: async function (res) {
	  const reslut = await rootActions.TaskAction.updateLocation(formData.id,{lon:res.longitude,lat:res.latitude,locationAddress:''});//等待位置更新请求
	  await loadTask(formData.id);//刷新数据
	  uni.showToast({//提示
	    icon: 'none',
	    title: '发送成功',
	  });
    },
  });
}
//选择位置
function chooseLocation(){
	// #ifdef APP-PLUS
	uni.getLocation({
      
	  success: async function (res) {
        if(formData.lon){//判断表单中是否有经纬度存在，有则替换uni.getLocation定位成功的经纬度
		  res.longitude = formData.lon
		  res.latitude = formData.lat
	    }
		uni.navigateTo({
			url:'/pagesOA/pages/team-work/project/tmap?src='+'/static/map.html'+'&lon=' + res.longitude + '&lat=' + res.latitude,//传参方式选址用url来传
			events:{// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				locationMsg:async function(data){
					const reslut = await rootActions.TaskAction.updateLocation(formData.id,{lon:data.data[0].lon,lat:data.data[0].lat,locationAddress:''})
					await loadTask(formData.id);
					uni.showToast({
					  icon: 'none',
					  title: '发送成功',
					});
				}
			}
		})
	  }
	});
	// #endif
}

这是页面的内容展示

由于是两个不同页面之间的通讯，要用到uni.navigateTo里面的events去监听

然后去创建我们的webview页面tmap.vue，页面中的@message是用来与h5页面通讯的方法

<template>
  <view>
        <web-view :src="src" @message="message"></web-view>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				subNVue:'',
				src:'',
				lat:'',
				lon:''
			};
		},
		onLoad(options){//获取页面传参
			this.src = options.src + '?lon=' + options.lon + '&lat=' + options.lat
 		},
		methods:{
			message(event){//获取h5页面返回的数据
				let res = event.detail.data
				// this.lon = res.lon
				// this.lat = res.lat
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit("locationMsg",{data:res});//传递上一页面的数据
				console.log(event.detail.data);
				uni.navigateBack()
			}
		},

	}
</script>

<style lang="scss">
</style>

h5页面的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <title>选择位置</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	
   <script>
	   
        var map;
        var zoom = 16;
		var lon;
		var lat;
        function onLoad() {
			console.log('showMap');
            map = new T.Map('mapDiv',{
                projection: 'EPSG:4326'
            });
			lon = getQuery('lon');
			lat = getQuery('lat');
			console.log(lon,lat)
			if(lon=='null'){
				map.centerAndZoom(new T.LngLat(116.40093, 39.92113), zoom)
			}else{
				map.centerAndZoom(new T.LngLat(lon, lat), zoom);
			}
			console.log('Done');
			document.addEventListener('UniAppJSBridgeReady', function() {
				console.log("ok")
			        });
			map.addEventListener("click",MapClick);
			var marker = new T.Marker(new T.LngLat(lon, lat));
			            //向地图上添加标注
			map.addOverLay(marker);
        }
		//取url中的参数值
		function getQuery(name) {
		    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
		    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		    let r = window.location.search.substr(1).match(reg);
		    console.log(r);
		    if(r != null) {
		        // 对参数值进行解码
		        return decodeURIComponent(r[2]);
		    }
		    return null;
		}
		function addMapClick()
			{
				removeMapClick();
				map.addEventListener("click",MapClick);
			}
		
			function removeMapClick()
			{
				map.removeEventListener("click",MapClick);
			}
			
			function MapClick(e)
			{
				map.clearOverLays();
				 var marker = new T.Marker(new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
				            //向地图上添加标注
				map.addOverLay(marker);
				// alert(e.lnglat.getLng()+","+e.lnglat.getLat());
				lon = e.lnglat.getLng();
				lat = e.lnglat.getLat();
			}
			function callBackClick()
			{
				uni.postMessage({
				    data: {
				        action: "1111",
						lon,
						lat,
				    }
				});
				 uni.getEnv(function(res) {
				            console.log('当前环境：' + JSON.stringify(res));
				        });
			}
    </script>
</head>

<body onLoad="onLoad()">
    <div id="mapDiv" style="width:100%; height:400px"></div>
	<div style="position:absolute;top: 450px;">
		<input type="button" value="确认" onClick="callBackClick();"/>
		<!-- <p>本示例演示如何给地图注册点击事件。</p>
			<div>
				地图点击事件：
				<input type="button" value="注册" onClick="addMapClick();"/>
				<input type="button" value="移除" onClick="removeMapClick();"/>
				<input type="button" value="通讯" onClick="callBackClick();"/>
			</div> -->
	</div>
</body>
</html>

至此通讯完成。