jQuery调用高德地图API搜索选择地址代码,输入城市地区关键词会自动显示相关搜索结果列表,点击搜索列表可获取详细地址和地图标注。
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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791