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