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