layui+腾讯地图 简易版搜索功能的实现

首先看一下项目中的效果图

接下来的就是具体的实现步骤：

html部分

 <div class="layui-form-item">
                    <label class="layui-form-label">所在地</label>
                    <div class="layui-input-block">
                        <input type="text" id="demo1" class="layui-input" readonly="readonly" name="store_address_ids">
                    </div>
                </div>
            
                <div class="layui-form-item" >
                    <label class="layui-form-label ">经度</label>
                    <div class="layui-input-block">
                        <input type="text" name="store_longitude" class="layui-input"   placeholder="请输入经度" value="" id="lon"   lay-filter="lon" >
                        <tip>点击地图点选</tip>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label  ">纬度</label>
                    <div class="layui-input-block">
                        <input type="text" name="store_latitude" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" >
                        <!-- <tip>点击地图点选</tip> -->
                    </div>
                </div>

 地图弹出层的部分，可以放在页面的任意位置

<div  id="tMap" class="layui-hide" style="padding: 10px;">
    <div  class="layui-form layuimini-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="search_key" id="search_key" class="layui-input"  placeholder="请输入地名" >
            </div>
            <button  class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button>
        </div>
    </div>
    <div id="maplocation" style="width:780px;height:400px;"></div>
</div>
<style>
   body .layui-ext-yourskin  .layui-layer-btn0{
        border: 1px solid #dedede;
        background-color:#fff;
        color: #333;
    }
    body .layui-ext-yourskin  .layui-layer-btn1{
        background-color:#1E9FFF;
        border-color:#1E9FFF;
        color: #fff;
    }
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=O6YBZ-XFTH4-HHSUR-DV4AI-5T4D6-AQWEA&libraries=drawing,geometry,place,convertor,visualization"></script>

js重点部分，点击弹出地图和简单搜索的方法都在下面

    var layer = layui.layer;
     $=layui.jquery;
     $(document).on('click','#lon',function(){
         if(!$("#demo1").val()){
             layer.msg('请选择所在地', { icon: 5, anim: 6 });
             return false;
         }
         var  markers = [];
        $("#tMap").removeClass('layui-hide');
       layer.open({
                         type:1,
                         area:["800px","600px"],
                         title:"地图标识",
                         btn: ['取消','确定'],
                         skin: 'layui-ext-yourskin',
                         content:$('#tMap'),
                         success:function(){
                            let map = new qq.maps.Map(document.getElementById("maplocation"), {
                                center: new qq.maps.LatLng(40.820004,111.718132),      // 地图的中心地理坐标。
                                zoom:13,                                                 // 地图的中心地理坐标。
                            });
                            
                            var latlngBounds = new qq.maps.LatLngBounds();
                            searchService = new qq.maps.SearchService({
                             
                                complete:function(results){
                                        console.log(results)
                                        var pois = results.detail.pois;
                                        var infoWin = new qq.maps.InfoWindow({
                                            map: map
                                        });
                                    var latlngBounds = new qq.maps.LatLngBounds();
                                    for (var i = 0, l = pois.length; i < l; i++) {
                                        var poi = pois[i];
                                        //扩展边界范围，用来包含搜索到的Poi点
                                        latlngBounds.extend(poi.latLng);
                        
                                        (function(n) {
                                            console.log(111)
                                            var marker = new qq.maps.Marker({
                                                map: map
                                            });
                                            marker.setPosition(pois[n].latLng);
                        
                                            marker.setTitle(i + 1);
                                            markers.push(marker);
                        
                        
                                            qq.maps.event.addListener(marker, 'click', function() {
                                                let latX = pois[n].latLng.getLat().toFixed(6);
                                                let lngY = pois[n].latLng.getLng().toFixed(6);
                                                $('#lon').val(latX);
                                                $('#lat').val(lngY);
                                                infoWin.open();
                                                infoWin.setContent('<div style="width:280px;height:100px;">' + '当前经纬度：' +
                                                    pois[n].latLng + '，名称：' + pois[n].name + '，当前位置：' + pois[n].address +'</div>');
                                                infoWin.setPosition(pois[n].latLng);
                                            });
                                        })(i);
                                    }
                                    //调整地图视野
                                    map.fitBounds(latlngBounds);
                                }
                            });
                            qq.maps.event.addListener(map, 'click', function(event) {
                                var marker=new qq.maps.Marker({
                                    position:event.latLng,
                                    map:map,
                                    draggable: true,
                                });
                                var info = new qq.maps.InfoWindow({
                                    map: map
                                });
                                var point = event.latLng;
                                let latX = point.getLat().toFixed(6);
                                let lngY = point.getLng().toFixed(6);
                                $('#lon').val(latX);
                                $('#lat').val(lngY);
                                
                                qq.maps.event.addListener(map, 'click', function(event) {
                                    
                                    marker.setMap(null);
                                });
                              
                                qq.maps.event.addListener(marker, 'dragging', function(event) {
                                   
                                    var latLng = event.latLng;
                                    let lat = latLng.getLat().toFixed(6);
                                    let lng = latLng.getLng().toFixed(6);
                                    $('#lon').val(lng);
                                    $('#lat').val(lat);
                                });
                            });
                      
                         } ,
                         yes: function(index, layero){
                             
                                //do something
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            },
                         cancel: function(index, layero){ 
                            //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                            document.getElementById("tMap").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间 
                                layer.close(index)
                            // }
                            return false; 
                            }    //这里content是一个普通的String
                            });
});

$(document).on('click','.searchKey',function(){
    var search_key=$("#search_key").val();
    var city=$(".el-input__inner").val().replace(/\ +/g,"").replace(/\//g,'');

     searchService.setLocation(city);
     searchService.search(search_key);
 
})

到此layui+腾讯地图简易版搜索及获取经纬度就实现了