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