100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
|
<!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>
|