duolamaojiazhen/application/admin/view/mp/index.html

{layout name="layout2" /}
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
 <div  id="tMap"  style="height:100vh; width: 100%;padding:20px">
                        <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:100%;height:90%;"></div>
                    </div>
<script src="/static/webjs/jquery.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service,tools&key=EVOBZ-VX7YU-QKJVR-BVESA-AVFT3-7JBWG"></script>
 
<script type="text/javascript">
var u = (<?php echo $u?>); //所有用户
var infos = []; //所有窗口
var  markers = [];
var map = null;
var editor = null;



 function convertToLatLngArray(coordArray) {
    var latLngArray = [];
    for (var i = 0; i < coordArray.length; i += 2) {
        var lat = parseFloat(coordArray[i].trim());
        var lng = parseFloat(coordArray[i + 1].trim());
        latLngArray.push(new TMap.LatLng(lat, lng));
    }
    return latLngArray;
} 

//
function u_to_infos(){
    clear_infos();
    if(!(u && u.length)) return
    let geometries = []
    for(let d of u){
        let center = new TMap.LatLng(d.lat,d.lng);//设置中心点坐标
        if(!d.lnglat) continue;
        
        let lnglat_data = d.lnglat.split(',')
        let path = convertToLatLngArray(lnglat_data)
        geometries.push({
            id:'polygon_'+d.id,
            'styleId': 'polygon', //绑定样式名
            'paths': path, //多边形轮廓
        })
        infos.push(
        new TMap.InfoWindow({
                map: map,
                position: center,
              content: "<div class='info-window' style='font-size:12px'><p>"+d.name+"</p></div>"
            })
    	)
    }
    
    var polygon = new TMap.MultiPolygon({
      map: map,
      //多边形数据
        geometries: geometries
    });
     
    editor = new TMap.tools.GeometryEditor({
      // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
      map: map, // 编辑器绑定的地图对象
      overlayList: [ 
        {
          overlay: polygon,
          id: 'polygon',
        }, 
      ],
      actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
      activeOverlayId: 'marker', // 激活图层
      snappable: true, // 开启吸附
      selectable:true
    });
     
}

function clear_infos(){
    if(infos && infos.length){
        for(let i in infos){
	    	infos[i].setMap(null)
    	}
    } 
}

console.log(u)
   $(function(){
        
       function addMarker(latlng){
            markers.updateGeometries([
                {
                  id: 'main',
                  position: latlng, // 将得到的坐标位置用点标记标注在地图上
                },
              ]);
            clear_infos()
            console.log(latlng,999)
            $.post('/admin/mp/map_user',{lng:latlng.lng,lat:latlng.lat},function(e){
                console.log(e)
                if(e.data && e.data.length){
                    u =  e.data 
                     for(let d of u){
                        let center = new TMap.LatLng(d.lat,d.lng);//设置中心点坐标
                        infos.push(
                        new TMap.InfoWindow({
                                map: map,
                                position: center,
                              content: "<div class='info-window' style='font-size:12px'><p>"+d.name+"</p></div>"
                            })
                    	)
                    }
                }
            })
       }
      
     map = new TMap.Map('maplocation', {
      zoom: 13,
      center: new TMap.LatLng(u[0].lat, u[0].lng),
    });
    
    u_to_infos()
    
    markers = new TMap.MultiMarker({
      map: map,
      geometries: [],
    });
    
    map.on('click', function(event) {
         lat_lng = event.latLng
        addMarker(event.latLng);
    }); 
    
    
    geocoder = new TMap.service.Geocoder();
    
                           
        searchService =  {
            search:function(name){
                geocoder.getLocation({ address:name })
                .then((result) => {
                    console.log(result,999)
                    lat_lng = result.result.location
                    addMarker( result.result.location)
                    // markers.updateGeometries([
                    //     {
                    //       id: 'main',
                    //       position: result.result.location, // 将得到的坐标位置用点标记标注在地图上
                    //     },
                    //   ]);
                     map.setCenter(result.result.location);
                        $('#lon').val(result.result.location.lng)
                         $('#lat').val(result.result.location.lat)
                  // 显示坐标数值
                });


                 
            }
        } 
                     
   })
        
                         
        $(document).on('click','.searchKey',function(){
            var search_key=$("#search_key").val();
            var search_key=$("#search_key").val(); 
                searchService.search(search_key);
 
        }) 





 
</script>