天天看点

【高德地图api】输入地点名称定位坐标,并放大地图级别

效果:

【高德地图api】输入地点名称定位坐标,并放大地图级别

代码:

<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); //放大地图
            })
          }
        })
    })
}
           

继续阅读