Easyadmin用百度地图选点返回经纬度

按照百度地图API官方说明申请key
HTML页面引入API
由于Easyadmin引用的layui界面UI，这里要用到layui.open
注意：1.引入百度dom不能用layui-hide属性，否则弹出界面无显示
2.关闭地图要记得致显示属性为NONE，并释放空间否则会出现

引入DOM部分

  <div id="maplocation" style="width:500px;height:350px;display: none;">
		 
 </div>

HTML代码

        <div class="layui-form-item">
            <label class="layui-form-label required">公司名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" lay-reqtext="请输入公司名称" placeholder="请输入公司名称" value="">
                <tip>填写菜单名称。</tip>
            </div>
        </div>
      
  <div class="layui-form-item" >
            <label class="layui-form-label ">经度</label>
            <div class="layui-input-block">
                <input type="text" name="lon" 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="lat" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" >
                <tip>点击地图点选</tip>
            </div>
        </div>

JS代码

<script type="text/javascript"> 
var layer = layui.layer;
 $=layui.jquery;
$(document).on('click','#lon',function(){

   layer.open({
                     type:1,
                     area:["500px","500px"],
                     title:"测试",
                     content:$('#maplocation'),
                     success:function(){
                       var map = new BMap.Map("maplocation"); // 创建地图实例 
                        var point = new BMap.Point(116.456, 39.915); // 创建点坐标 
                        map.centerAndZoom(point, 12);
                         map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                           function myFun(result){
                            var cityName = result.name;
                            map.setCenter(cityName);
                            //alert("当前定位城市:"+cityName);
                        }
                        var myCity = new BMap.LocalCity();
                        myCity.get(myFun);
                        var marker = new BMap.Marker(map.getCenter());  // 创建标注
                        map.addOverlay(marker);               // 将标注添加到地图中
                        marker.enableDragging();                //可拖拽
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        map.addEventListener("click",function(e){  
                              //alert(e.point.lng+","+e.point.lat);// 单击地图获取坐标点；
                             $('#lon').val(e.point.lng);
                            $('#lat').val(e.point.lat);
                           map.panTo(new BMap.Point(e.point.lng,e.point.lat));// map.panTo方法，把点击的点设置为地图中心点  
                        }); 
                        marker.addEventListener("dragend", function(e){                    //拖拽标注获取标注坐标
                             //alert("当前位置：" + e.point.lng + ", " + e.point.lat);           //可拖拽的标注 
                             $("#lon").val(e.point.lng);
                            $("#lat").val(e.point.lat);
                        })
                        //加载完成之后,改变标注点坐标,使之和当前定位的城市基本相符
                        map.addEventListener("tilesloaded",function(){
                            var newpoint = map.getCenter();
                            marker.setPosition(newpoint);
                        });
                     } ,
                     cancel: function(index, layero){ 
  //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
   document.getElementById("maplocation").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间 
     layer.close(index)
 // }
  return false; 
}    //这里content是一个普通的String
                        });
});
</script>