效果:
代码:
<div class="street-map-search-warp layui-hide">
<div style="width: 100%;height: 38px;">
<input class="layui-input street-map-search-input" id="street-map-search-input" placeholder="输入名称,快速定位地图中心坐标" >
</div>
<ul id="input-info"><span></span></ul>
</div>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始地图级别
});
//搜索定位地图功能---鼠标enter监听事件
$('.street-map-search-input').keypress(function(even){
if (even.which == 13) {
var searchVal = $(this).val();
if (searchVal) {
placeSearch(searchVal);
} else {
layer.msg('请输入待搜索地址', {icon:2});
}
}
});
// 地址搜索
function placeSearch(keywords) {
if(!keywords) return;
AMap.plugin('AMap.Autocomplete', function(){
// 实例化Autocomplete
var autoOptions = {
city: '成都市'
}
var autoComplete = new AMap.Autocomplete(autoOptions);
autoComplete.search(keywords, function(status, result) {
var marker;
// 搜索成功时,result即是对应的匹配数据
if (result.info === 'OK') {
let tips = result.tips;
let tishtml = "";
tips.forEach((item)=>{
tishtml+=`<li lat="${item.location.lat}" lng="${item.location.lng}" name="${item.name}" >${item.name}</li>`
})
$("#input-info").html(tishtml);
$("#input-info").on("click",'li',function(){
let lat = $(this).attr("lat");
let lng = $(this).attr("lng");
let name = $(this).attr("name");
$('#street-map-search-input').val(name);
map.panTo([lng, lat]);//移动到定位的位置
var lnglat=[lng, lat];
if(!marker){
//设置图标属性
marker = new AMap.Marker({
icon: new AMap.Icon({
size: new AMap.Size(40, 40), //图标大小
}),
});
map.add(marker); //显示图标
}
marker.setPosition(lnglat);
map.setZoomAndCenter(15, lnglat); //放大地图
})
}
})
})
}