拖动地图获取中心点的经纬度
html部分
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#container {
width: 100%;
height: 100%;
}
#info {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
background: rgba(102, 175, 233, 0.6);
border-radius: 3px;
padding: 10px;
width: 170px;
z-index: 9999;
}
#copyright {
position: absolute;
bottom: 0px;
left: 80%;
z-index: 9999;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info">
<input type="hidden" id="lng" value="">
<input type="hidden" id="lat" value="">
<p>当前中心点:
<button id="saveBut" type="button" class="form-btn form-btn-small" onclick="getCenter()"><i
class="fa fa-save"></i> 保 存
</button>
<div id="position"></div>
</p>
</div>
</body>
js部分
function initMap() {
var lone = parent.$('input[name=longitude]').val();
var late = parent.$('input[name=latitude]').val();
var address = parent.$('.address').text();
if (!isEmpty(lone) && !isEmpty(late)) {
if (address) {
$.ajax({
async: true,
type: 'GET',
dataType: 'jsonp',
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
address: address,
key: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
output: "jsonp"
},
success: function (data) {
if (data.status == 0) {
var longitude = data.result.location.lng;
var latitude = data.result.location.lat;
setOrientation(longitude, latitude);
}
}, error: function (data) {
alert(data.message)
}
});
}
} else {
setOrientation(lone, late);
}
}
/**
* 设置显示坐标
*/
function setOrientation(longitude, latitude) {
$('#lng').val(longitude);
$('#lat').val(latitude);
var position = document.getElementById("position");
position.innerHTML = longitude + ',' + latitude//获取地图中心点
var center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
zoom: 12, //设置地图缩放级别
center: center, //设置地图中心点坐标
});
var markerGeo = {
id: 'center',
position: map.getCenter(),
};
// 创建一个位于地图中心点的marker
var markerLayer = new TMap.MultiMarker({
map: map,
geometries: [
markerGeo
]
});
// 监听中心点变化事件,更新marker的位置
map.on('center_changed', () => {
markerGeo.position = map.getCenter();
markerLayer.updateGeometries([markerGeo]);
});
//监听地图平移
map.on("pan", function () {
var lng = map.getCenter().getLng().toFixed(6);
var lat = map.getCenter().getLat().toFixed(6);
$('#lng').val(lng);
$('#lat').val(lat);
position.innerHTML = lng + "," + lat;//获取地图中心点
});
}
/**
* 获取中心点位置赋值父页面
*/
function getCenter() {
parent.$('input[name=longitude]').val($('#lng').val());
parent.$('input[name=latitude]').val($('#lat').val());
}