<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<title>地图多点设置位置</title>
|
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
|
<link href="../css/public.css" rel="stylesheet" />
|
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
|
<script src="http://webapi.amap.com/maps?v=1.4.0&key=3627ed9deaac2622e26a7169f0c36b1b&plugin=AMap.Geocoder"></script>
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/public.js"></script>
|
<script src="../js/tools.js"></script>
|
</head>
|
<body>
|
|
<div id="container"></div>
|
<div class="search-box" id="search_box" style="display: block;">
|
<input class="search-text" id="search_text" type="text" placeholder="请输入详细地址" onkeypress="keySearchAddress()" />
|
<input class="search-button" id="search_button" type="button" onclick="searchAddress()" />
|
</div>
|
|
<script>
|
|
let map;//地图对象 高德jsapi用
|
let _map;//地图对象
|
let _allSignObjs = [];//所有标记对象
|
let _selectedOverlay;//选择的覆盖物
|
let _drawSignObj;//绘制的标记对象
|
|
//初始化
|
$(document).ready(function () {
|
|
try {
|
map = _map = new AMap.Map('container', {
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 10,
|
zooms: [3, 20]
|
});
|
|
_map.on("complete", function () {//地图加载完成
|
callbackObj.loadCompleted();
|
});
|
|
_map.on("click", function () {
|
if ($("#search_text").css("display") == 'block') {
|
$("#search_text").hide();
|
}
|
});
|
|
}
|
catch (e) {
|
callbackObj.loadFailed();
|
}
|
})
|
|
//设置标记对象
|
function setSignObjs(signObjs) {
|
cancelSelectSignObj();
|
if (isEmpty(signObjs)) {
|
_allSignObjs = [];
|
}
|
else {
|
_allSignObjs = signObjs;
|
}
|
_map.clearMap();
|
_allSignObjs.forEach(function (x) {
|
let position = [x.Point.X, x.Point.Y];
|
let marker = new AMap.Marker({
|
position: position,
|
anchor: "center",
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/weizhi.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(0, 0)
|
});
|
|
marker.objInfo = x;
|
marker.setLabel({
|
offset: new AMap.Pixel(0, -20), //设置文本标注偏移量
|
content:x.SignName, //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
marker.on("click", function (e) {
|
selectSignObj(e.target.objInfo.SignId);
|
});
|
marker.setMap(_map);
|
});
|
return true;
|
}
|
|
|
//删除单个覆盖物
|
function removeSignObj(signId) {
|
if (isEmpty(signId)) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
return false;
|
}
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == signId; });
|
if (signObj) {
|
let overlays = _map.getAllOverlays();
|
let overlay = overlays.find(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
if (overlay) {
|
if (_selectedOverlay) {
|
if (_selectedOverlay.objInfo) {
|
if (_selectedOverlay.objInfo.SignId == signId) {
|
cancelSelectSignObj();
|
}
|
}
|
}
|
_map.remove(overlay);
|
let index = _allSignObjs.indexOf(signObj);
|
_allSignObjs.splice(index, 1);
|
return true;
|
}
|
}
|
return false;
|
}
|
|
//开始绘制
|
function startDraw(signObj) {
|
if (isEmpty(signObj)) {
|
return false;
|
}
|
|
_drawSignObj = signObj;
|
|
_map.on("click", onMapDrawClick);
|
return true;
|
}
|
|
//地图绘制点标记点击事件
|
function onMapDrawClick(e) {
|
_map.off("click", onMapDrawClick);
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
_allSignObjs.push(_drawSignObj);
|
let position = [e.lnglat.getLng(), e.lnglat.getLat()];
|
let marker = new AMap.Marker({
|
position: position,
|
anchor: "center",
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/weizhi.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(0, 0)
|
});
|
marker.objInfo = _drawSignObj;
|
marker.setLabel({
|
offset: new AMap.Pixel(0, -20), //设置文本标注偏移量
|
content: _drawSignObj.SignName, //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
marker.on("click", function (e) {
|
selectSignObj(e.target.objInfo.SignId);
|
});
|
marker.setMap(_map);
|
_drawSignObj.Point = { X: position[0], Y: position[1] };
|
getAddressByLnglat(position, function (address) {
|
_drawSignObj.Address = address;
|
let json = JSON.stringify(_drawSignObj);
|
callbackObj.finishDraw(json);
|
});
|
}
|
|
//选择标记对象
|
function selectSignObj(signId) {
|
if (isEmpty(signId)) {
|
return;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == signId; });
|
if (signObj) {
|
let overlays = _map.getAllOverlays();
|
let overlay = overlays.find(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
if (overlay) {
|
overlay.setDraggable(true);
|
overlay.on("dragend", dragend);
|
setSelectStyle(overlay);
|
callbackObj.selectSignObj(signId);
|
}
|
}
|
}
|
|
//设置选择样式
|
function setSelectStyle(overlay) {
|
setCancelSelectStyle();
|
if (overlay.objInfo) {
|
let info = [];
|
info.push("<div className='input-card'>");
|
info.push("<p class='input-item'>名称：");
|
info.push(overlay.objInfo.SignName);
|
info.push("</p>");
|
info.push("<p class='input-item'>经纬度：");
|
info.push(overlay.objInfo.Point.X + "," + overlay.objInfo.Point.Y);
|
info.push("</p>");
|
info.push("<p class='input-item'>地址：");
|
info.push(overlay.objInfo.address);
|
info.push("</p>");
|
info.push("</div>");
|
infoWindow = new AMap.InfoWindow({
|
anchor: 'bottom-center',
|
content: info.join(""),
|
offset: new AMap.Pixel(0, -32)
|
});
|
|
infoWindow.open(_map, overlay.getPosition());
|
}
|
_selectedOverlay = overlay;
|
}
|
|
//取消选择标记对象
|
function cancelSelectSignObj() {
|
if (_selectedOverlay) {
|
_selectedOverlay.setDraggable(false);
|
_selectedOverlay.off("dragend", dragend);
|
setCancelSelectStyle();
|
callbackObj.selectSignObj("");
|
}
|
}
|
|
//设置取消选择样式
|
function setCancelSelectStyle() {
|
if (_selectedOverlay) {
|
_map.clearInfoWindow();
|
_selectedOverlay = null;
|
}
|
}
|
|
//拖拽结束
|
function dragend() {
|
if (_selectedOverlay) {
|
_map.clearInfoWindow();
|
let position = _selectedOverlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
_selectedOverlay.objInfo.Point = { X: lnglat[0], Y: lnglat[1] };
|
getAddressByLnglat(lnglat, function (address) {
|
_selectedOverlay.objInfo.Address = address;
|
callbackObj.updateSignObj(JSON.stringify(_selectedOverlay.objInfo));
|
});
|
setSelectStyle(_selectedOverlay);
|
}
|
}
|
|
//设置搜索面板的可见性
|
function setSearchPanelVisibility() {
|
document.getElementById('search_box').hidden = !document.getElementById('search_box').hidden;
|
}
|
|
//根据点获取地址
|
getAddressByLnglat = function (lnglat, callback) {
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
let address = null;
|
if (status === 'complete' && result.info === 'OK') {
|
address = result.regeocode.formattedAddress; //返回地址描述
|
}
|
callback(address);
|
});
|
}
|
|
//根据详细地址查看地图
|
function locateByAddress(address) {
|
let geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let geocode = result.geocodes;
|
_map.setCenter([geocode[0].location.getLng(), geocode[0].location.getLat()]);
|
let marker = new AMap.Marker({ position: [geocode[0].location.getLng(), geocode[0].location.getLat()] });
|
_map.setFitView(marker);
|
}
|
else {
|
let error = { ErrorType: error_type.locate_address, Message: "根据详细地址定位地图失败" };
|
callbackObj.handingError(JSON.stringify(error));
|
}
|
});
|
}
|
|
//搜索地址
|
function searchAddress() {
|
if ($("#search_text").css("display") == 'block') {
|
let address = $("#search_text").val();
|
if (!isEmpty(address)) {
|
locateByAddress(address);
|
}
|
$("#search_text").hide();
|
}
|
else {
|
$("#search_text").show();
|
}
|
}
|
|
//enter搜索地址
|
function keySearchAddress() {
|
if (event.keyCode == 13) {
|
searchAddress();
|
}
|
}
|
|
|
</script>
|
</body>
|
</html>
|
