<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<script type="text/javascript" src="__COMMON__/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="__MANAGER__/layui/css/layui.css">
<script type="text/javascript" src="__MANAGER__/layui/layui.all.js"></script>
<!--百度地图js引入-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kajzNi5RGekhNe9RGspconldoRGNDVWq"></script>
<style>
#iMap {
height: 450px;
width: 100%;
clear: both;
}
.info {
margin: 0 0 0 10px;
}
label {
width: 80px;
float: left;
}
.detail {
padding: 10px;
border: 1px solid #aaccaa;
}
</style>
</head>
<body>
<div class="info">
<p>说明：</p>
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>
</div>
<div class="layui-card layui-col-md12">
<div class="layui-card-body layui-form" style="overflow: auto;">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" class="layui-input" id="keyword" placeholder="请输入地名" value=""/>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
</div>
</div>
</div>
</div>
<div id="iMap"></div>
<script language="javascript">
layui.use(["layer"],function () {
var layer =layui.layer;
$(function () {
let lng = {:empty($lng)?"104.072356":$lng};
let lat = {:empty($lat)?"30.662162":$lat};
var map = new BMap.Map("iMap");// 创建地图实例
var point = new BMap.Point(lng, lat);// 创建点坐标
map.centerAndZoom(point, 12);// 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl());//标尺控件
map.addControl(new BMap.ScaleControl());//比例尺控件
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
map.enableKeyboard();//启动键盘操作地图
map.addEventListener("click",function(e){
// input.value = e.point.lng;
// input2.value= e.point.lat;
parent.setLngLat(e.point.lng,e.point.lat);
// console.log(e.point.lng)
// console.log(e.point.lat)
map.clearOverlays();//清除覆盖物
map.addOverlay(new BMap.Marker({"lng": e.point.lng,"lat":e.point.lat}))
});
var geoc = new BMap.Geocoder();//创建地址解析器实例
$("#search").on("click",function () {
// 将地址解析结果显示在地图上，并调整地图视野
geoc.getPoint($("#keyword").val(), function(point){
console.log(point)
if(point){
parent.setLngLat(point.lng,point.lat);
map.centerAndZoom(point, 16);
map.clearOverlays();//清除覆盖物
map.addOverlay(new BMap.Marker(point))
}else{
alert('您选择的地址没有解析到结果！');
}
}, $("#keyword").val())
})
})
})
</script>
</body>
</html>