167 lines
6.3 KiB
HTML
Executable File
167 lines
6.3 KiB
HTML
Executable File
<!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> |