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> |