按照百度地图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>