144 lines
5.2 KiB
HTML
144 lines
5.2 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 src="https://map.qq.com/api/gljs?v=1.exp&key=XJXBZ-7EBCD-2MB45-HB73N-R362T-WRFJR"></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 center = new TMap.LatLng(lat,lng);
|
|||
|
|
//定义map变量，调用 TMap.Map() 构造函数创建地图
|
|||
|
|
map = new TMap.Map(document.getElementById('iMap'), {
|
|||
|
|
center: center,//设置地图中心点坐标
|
|||
|
|
zoom: 17.2, //设置地图缩放级别
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//创建并初始化MultiMarker
|
|||
|
|
markerLayer = new TMap.MultiMarker({
|
|||
|
|
map: map, //指定地图容器
|
|||
|
|
//样式定义
|
|||
|
|
//点标记数据数组
|
|||
|
|
geometries: [{
|
|||
|
|
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
|
|||
|
|
"position": new TMap.LatLng(lat, lng), //点标记坐标位置
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
mapInit();
|
|||
|
|
//定义事件处理方法
|
|||
|
|
var clickHandler=function(evt){
|
|||
|
|
var lat = evt.latLng.getLat().toFixed(6);
|
|||
|
|
var lng = evt.latLng.getLng().toFixed(6);
|
|||
|
|
//console.log("您点击的的坐标是："+ lat + "," + lng);
|
|||
|
|
|
|||
|
|
//修改id为的点标记的位置
|
|||
|
|
|
|||
|
|
//修改id为4的点标记的位置
|
|||
|
|
markerLayer.updateGeometries([
|
|||
|
|
{
|
|||
|
|
"id": "1",
|
|||
|
|
"position": new TMap.LatLng(lat, lng),
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
parent.setLngLat(lng,lat);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
//Map实例创建后，通过on方法绑定点击事件
|
|||
|
|
map.on("click",clickHandler)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//搜索
|
|||
|
|
$("#search").on("click",function () {
|
|||
|
|
$.ajax({
|
|||
|
|
type: "get",
|
|||
|
|
async: false,
|
|||
|
|
url: "https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&address="+$("#keyword").val()+"&key=XJXBZ-7EBCD-2MB45-HB73N-R362T-WRFJR",
|
|||
|
|
dataType: "jsonp",
|
|||
|
|
success: function(json){
|
|||
|
|
console.log(json);
|
|||
|
|
if(json.status == 0){
|
|||
|
|
let lat=json.result.location.lat;
|
|||
|
|
let lng=json.result.location.lng;
|
|||
|
|
//修改地图中心点
|
|||
|
|
map.setCenter(new TMap.LatLng(lat,lng));
|
|||
|
|
//修改id为4的点标记的位置
|
|||
|
|
markerLayer.updateGeometries([
|
|||
|
|
{
|
|||
|
|
"id": "1",
|
|||
|
|
"position": new TMap.LatLng(lat, lng),
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
//map.panTo(new qq.maps.LatLng(json.result.location.lat, json.result.location.lng));
|
|||
|
|
},
|
|||
|
|
error: function(){
|
|||
|
|
layer.msg('搜错出错');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|