jQuery调用高德地图API搜索选择地址代码

来源:https://www.sucaihuo.com/js/4401.html 2019-06-05 11:45浏览(1083) 收藏

jQuery调用高德地图API搜索选择地址代码,输入城市地区关键词会自动显示相关搜索结果列表,点击搜索列表可获取详细地址和地图标注。
jQuery调用高德地图API搜索选择地址代码
分类:其它特效 > 地图 难易:中级
查看演示 下载资源 下载积分: 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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2