騰訊地圖定位

第一個頁面

html檔案

<div>			
	<span class="title">位址</span>
	<a href="map.html" target="_blank" rel="external nofollow" >
		<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" framehttps://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>