jQuery調用高德地圖API搜索選擇地址代碼

來源:http://www.xdpitk.live/js/4401.html 2019-06-05 11:45瀏覽(311) 收藏

jQuery調用高德地圖API搜索選擇地址代碼,輸入城市地區關鍵詞會自動顯示相關搜索結果列表,點擊搜索列表可獲取詳細地址和地圖標注。
jQuery調用高德地圖API搜索選擇地址代碼
分類:其它特效 > 地圖 難易:中級
查看演示 下載資源: 15 下載資源 下載積分: 30 積分

js代碼

<!--地圖api調用-->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=4d81136d607c68fb6c906599c0bd1de1&plugin=AMap.Autocomplete,AMap.Geocoder"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/underscore-min.js" ></script>
<script type="text/javascript" src="js/backbone-min.js" ></script>
<script type="text/javascript" src='js/prety-json.js'></script>
<script>
//初始化地圖
var map = new AMap.Map('container', {
  resizeEnable: true, //是否監控地圖容器尺寸變化
  zoom: 11, //初始地圖級別
});
var geocoder,marker,lnglat;
function regeoCode() {
	if(!geocoder){
		geocoder = new AMap.Geocoder({
			city: "010", //城市設為北京,默認:“全國”
			radius: 1000 //范圍,默認:500
		});
	}
	 if(!marker){
		marker = new AMap.Marker();
		map.add(marker);
	}
	marker.setPosition(lnglat);
	
	geocoder.getAddress(lnglat, function(status, result) {
		if (status === 'complete'&&result.regeocode) {
			var address = result.regeocode.formattedAddress;
			document.getElementById('address').value = address;
		}else{
			log.error('根據經緯度查詢地址失敗')
		}
	});
}

map.on('click',function(e){
	lnglat = e.lnglat;
	regeoCode();
})
// 獲取輸入提示信息
function autoInput(){
  var keywords = document.getElementById("input").value;
  AMap.plugin('AMap.Autocomplete', function(){
	// 實例化Autocomplete
	var autoOptions = {
	  city: '全國'
	}
	var autoComplete = new AMap.Autocomplete(autoOptions);
	autoComplete.search(keywords, function(status, result) {
	  // 搜索成功時,result即是對應的匹配數據
	  console.log(result);
	  let tips = result.tips;
	  let tishtml = "";
	  tips.forEach((item)=>{
		tishtml+=`<span lat="${item.location.lat}" lng="${item.location.lng}">${item.name}</span>`
	  })
	  $("#input-info").html(tishtml);
	})
  })
}

autoInput();

document.getElementById("input").oninput = autoInput;
$("#input-info").on("click",'span',function(){
	let lat = $(this).attr("lat");
	let lng = $(this).attr("lng");
	map.panTo([lng, lat]);
	lnglat=[lng, lat];
	regeoCode();
})
</script>
評論1
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 416148489

  • 頭像 沙發
    06-05 22:50
    江***哥
    不錯不錯很好用呀
1 2
重庆百变王牌app