167 lines
6.3 KiB
HTML
167 lines
6.3 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://webapi.amap.com/maps?v=1.4.14&key=68b7bd8022d63972a2a31b5d6a3c69b6"></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 () {
|
|||
|
|
var mapObj;
|
|||
|
|
var lnglatXY;
|
|||
|
|
//初始化地图
|
|||
|
|
function mapInit() {
|
|||
|
|
let lng = {:empty($lng)?"104.072356":$lng};
|
|||
|
|
let lat = {:empty($lat)?"30.662162":$lat};
|
|||
|
|
var opt = {
|
|||
|
|
level: 14, //设置地图缩放级别
|
|||
|
|
center: new AMap.LngLat(lng,lat) //设置地图中心点
|
|||
|
|
}
|
|||
|
|
mapObj = new AMap.Map("iMap", opt);
|
|||
|
|
AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
|
|||
|
|
|
|||
|
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
|||
|
|
|
|||
|
|
// 创建一个 Marker 实例：
|
|||
|
|
var marker = new AMap.Marker({
|
|||
|
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|||
|
|
});
|
|||
|
|
// 将创建的点标记添加到已有的地图实例：
|
|||
|
|
mapObj.add(marker);
|
|||
|
|
}
|
|||
|
|
mapInit();
|
|||
|
|
function geocoder() {
|
|||
|
|
var MGeocoder;
|
|||
|
|
//加载地理编码插件
|
|||
|
|
mapObj.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],
|
|||
|
|
function(){
|
|||
|
|
mapObj.addControl(new AMap.ToolBar());
|
|||
|
|
|
|||
|
|
|
|||
|
|
mapObj.addControl(new AMap.Scale());
|
|||
|
|
|
|||
|
|
|
|||
|
|
mapObj.addControl(new AMap.OverView({isOpen:true}));
|
|||
|
|
mapObj.addControl(new AMap.MapType());
|
|||
|
|
mapObj.addControl(new AMap.Geolocation());
|
|||
|
|
});
|
|||
|
|
mapObj.plugin(["AMap.Geocoder"], function () {
|
|||
|
|
MGeocoder = new AMap.Geocoder({
|
|||
|
|
radius: 1000,
|
|||
|
|
extensions: "all"
|
|||
|
|
});
|
|||
|
|
//返回地理编码结果
|
|||
|
|
AMap.event.addListener(MGeocoder, "complete");
|
|||
|
|
//逆地理编码
|
|||
|
|
MGeocoder.getAddress(lnglatXY);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//鼠标点击，获取经纬度坐标
|
|||
|
|
function getLnglat(e) {
|
|||
|
|
mapObj.clearMap();
|
|||
|
|
let lng = e.lnglat.getLng();
|
|||
|
|
let lat = e.lnglat.getLat();
|
|||
|
|
parent.setLngLat(lng,lat);
|
|||
|
|
|
|||
|
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
|||
|
|
geocoder();
|
|||
|
|
|
|||
|
|
// 创建一个 Marker 实例：
|
|||
|
|
var marker = new AMap.Marker({
|
|||
|
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|||
|
|
});
|
|||
|
|
// 将创建的点标记添加到已有的地图实例：
|
|||
|
|
mapObj.add(marker);
|
|||
|
|
}
|
|||
|
|
//搜索
|
|||
|
|
$("#search").on("click",function () {
|
|||
|
|
$.ajax({
|
|||
|
|
url: "https://restapi.amap.com/v3/geocode/geo?parameters",
|
|||
|
|
data: {
|
|||
|
|
"key":"68b7bd8022d63972a2a31b5d6a3c69b6",
|
|||
|
|
"address":$("#keyword").val(),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
type: 'get',
|
|||
|
|
dataType: 'json',
|
|||
|
|
timeout: 10000,
|
|||
|
|
success: function(data){
|
|||
|
|
if(data.status==1&&data.count>0){
|
|||
|
|
let geo = data.geocodes[0].location.split(",");
|
|||
|
|
let lng = geo[0];
|
|||
|
|
let lat = geo[1];
|
|||
|
|
//设置中心点
|
|||
|
|
mapObj.setZoomAndCenter(14, [lng,lat ]);
|
|||
|
|
|
|||
|
|
// 创建一个 Marker 实例：
|
|||
|
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
|||
|
|
var marker = new AMap.Marker({
|
|||
|
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|||
|
|
});
|
|||
|
|
// 将创建的点标记添加到已有的地图实例：
|
|||
|
|
mapObj.add(marker);
|
|||
|
|
|
|||
|
|
parent.setLngLat(lng,lat);
|
|||
|
|
}else{
|
|||
|
|
layer.msg("没有搜索结果");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error:function(xhr,type,errorThrown){
|
|||
|
|
layer.msg('操作失败！', {time: 1500});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|