网页间地址传递与地图定位-CSDN博客

本文链接：https://blog.csdn.net/small_animation/article/details/91049760

本文介绍了一种网页间地址参数传递的方法，并利用腾讯地图API实现地图定位选择功能。通过解析URL参数并将其填充到输入框，再跳转至地图页面让用户选择具体地点，最后将选定位置回传至原页面。

第一个页面
html文件

<div>			
	<span class="title">地址</span>
	<a href="map.html">
		<input type="" style="width: 100%;" name="" id="map" value="" />
	</a> 							
</div>

js文件

	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script>
			$(function(){
				var addr = window.location.href;
				var address = decodeURI(addr).split('addr=')[1] //获取地址栏后的参数addr .decodeURI方法解析乱码
				$('#map').val(address)  //把获取到的地址添加到id为map的input框内
				console.log(address)		
			});
	</script>

跳转的第二个页面,即地图选择页面
html文件

<iframe id="mapPage" width="100%" height="600px" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=SKDBZ-XNQKD-5GL4O-PYDB6-P3ZY5-OVFKX&referer=myapp">  //key值为自己的key值较安全一点
</iframe>

js文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
		window.addEventListener('message', function(event) {
			// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			var loc = event.data;
			console.log(loc.poiaddress)
			window.location.href = 'fabu_meitan_info.html?addr='+loc.poiaddress; //把addr带到第一个页面
			if(loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
				//console.log('location', loc);
			}
		}, false);
	</script>

腾讯地图定位