<!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/display_menu.css" rel="stylesheet" />
|
<link href="../css//honey_switch.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,AMap.Autocomplete,AMap.PlaceSearch"></script>
|
<!-- <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> -->
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/honey_switch.js"></script>
|
<script src="../js/map_public.js"></script>
|
<script src="../js/tools.js"></script>
|
|
</head>
|
|
<body>
|
<!-- <div style="position: absolute;top:100px;left:200px;z-index: 9999;">
|
<button onclick="beginAddMarker()">开始添加点</button>
|
<button onclick="startEditDraw()">开始编辑</button>
|
<button onclick="removeSignObj(1)">删除</button>
|
</div> -->
|
|
|
<div id="container"></div>
|
<div class="top_menu">
|
<button class="button button_select" target="false" style="float: left; height: 47px;">显示</button>
|
<ul class="checkboxUl">
|
<li>
|
<label>
|
<span class="switch-on"></span>
|
<input type="checkbox" checked="checked" name="bg" />
|
<div style="margin-top: 9px; float: left;">背景</div>
|
</label>
|
</li>
|
<li>
|
<label>
|
<span class="switch-on"></span>
|
<input type="checkbox" checked="checked" name="road" />
|
<div style="margin-top: 9px; float: left;">道路</div>
|
</label>
|
</li>
|
<li>
|
<label>
|
<span class="switch-on"></span>
|
<input type="checkbox" checked="checked" name="building" />
|
<div style="margin-top: 9px; float: left;">建筑物</div>
|
</label>
|
</li>
|
<li>
|
<label>
|
<span class="switch-on"></span>
|
<input type="checkbox" checked="checked" name="point" />
|
<div style="margin-top: 9px; float: left;">标注</div>
|
</label>
|
</li>
|
</ul>
|
<script src="../js/display_menu.js"></script>
|
</div>
|
|
<script>
|
|
var _map;//地图对象
|
var _marker;//地图标记
|
var _point;//经纬度信息
|
var _address;//详细地址
|
var _pointList = [];//标记点列表
|
var _selectedOverLay;//选中的覆盖物
|
|
|
//初始化
|
$(document).ready(function () {
|
|
try {
|
_map = new AMap.Map('container', {
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 16,
|
zooms: [3, 20]
|
});
|
|
_map.on("complete", function () {//地图加载完成
|
callbackObj.loadCompleted();
|
// var list = [
|
// { SignId: 1, Point: { X: 121.396058, Y: 31.247995 } },
|
// { SignId: 2, Point: { X: 121.438973, Y: 31.233171 } },
|
// { "SignId": 3, "Point": { "X": 121.439191, "Y": 31.232889 } },
|
// ]
|
// loadSignObjs(list)
|
})
|
|
}
|
catch (e) {
|
callbackObj.loadFailed();
|
}
|
})
|
|
|
//加载点标记
|
function loadSignObjs(list) {
|
_map.clearMap();
|
appendSignObjs(list);
|
}
|
//添加 多个点标记
|
function appendSignObjs(list) {
|
for (var i = 0; i < list.length; i++) {
|
var signObj = list[i];
|
console.log(signObj)
|
appendSignObj(signObj);
|
}
|
}
|
|
//添加 点标记
|
function appendSignObj(signObj) {
|
_point = signObj.Point;
|
var position = [_point.X, _point.Y];
|
_marker = new AMap.Marker({
|
position: position,
|
anchor: "bottom-center",
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/current.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(0, 0)
|
});
|
_marker.setMap(_map);
|
_marker.objInfo = signObj;
|
_marker.setLabel({
|
offset: new AMap.Pixel(0, -20), //设置文本标注偏移量
|
content: "<div class='info'>" + signObj.SignId + "</div>", //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});;
|
MarkerBindEvent(_marker)
|
}
|
|
//开始添加点标记
|
let addMarkerInfo = null;
|
function beginAddMarker(info) {
|
// info = { SignId: _pointList.length + 1 };//测试用 此数据后台传输
|
addMarkerInfo = info;
|
_map.on("click", onMapClick, true);
|
}
|
|
//结束添加点标记
|
function endAddMarker() {
|
addMarkerInfo = null;
|
_map.off("click", onMapClick,);
|
}
|
|
|
//地图点击事件
|
function onMapClick(e) {
|
if (!addMarkerInfo) return;
|
var position = [e.lnglat.getLng(), e.lnglat.getLat()];
|
_marker = new AMap.Marker(
|
{
|
position: position,
|
anchor: "bottom-center",
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32),
|
image: "../img/current.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(0, 0)
|
});
|
_marker.setMap(_map);
|
var objInfo = addMarkerInfo
|
_marker.setLabel({
|
offset: new AMap.Pixel(0, -20), //设置文本标注偏移量
|
content: "<div class='info'>" + objInfo.SignId + "</div>", //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});;
|
_point = { X: position[0], Y: position[1] };
|
objInfo.Point = _point
|
_marker.objInfo = objInfo
|
_pointList.push(objInfo)
|
var json = JSON.stringify(objInfo);
|
// console.log(json, 167)
|
callbackObj.set(json);
|
MarkerBindEvent(_marker)
|
endAddMarker();
|
|
}
|
|
//绑定点击事件
|
function MarkerBindEvent(_marker) {
|
_marker.on("click", function (e) {
|
MapClickStyle(e.target);
|
callbackObj.selectSignObj(e.target.objInfo.SignId);
|
})
|
}
|
|
//地图对象点击 设置选中状态
|
function MapClickStyle(overlay) {
|
mapClickCancel()//选中时 先取消上次选中(如果存在)
|
//构建信息窗体中显示的内容
|
var info = [];
|
info.push('<div class="markerInfoDiv"><div style=\"padding:0px 0px 0px 4px;\"><b>' + overlay.objInfo.SignId + '</b> <a class="markerInfoA" onclick="_map.clearInfoWindow()" >关闭</a>');
|
// info.push("地址：" + address + "</div></div>");
|
info.push("</div></div>");
|
infoWindow = new AMap.InfoWindow({
|
anchor: 'bottom-center',
|
content: info.join("<br/>"), //使用默认信息窗体框样式，显示信息内容
|
offset: new AMap.Pixel(0, -32)
|
});
|
infoWindow.open(_map, overlay.getPosition());
|
_selectedOverLay = overlay;
|
}
|
|
//取消选择状态
|
function mapClickCancel() {
|
if (_selectedOverLay != null) {
|
_map.clearInfoWindow();
|
_selectedOverLay = null;
|
}
|
callbackObj.selectSignObj("");
|
}
|
|
|
|
//开始编辑
|
function startEditDraw() {
|
|
if (_selectedOverLay == null) {
|
console.log("请选择要编辑的对象")
|
callbackObj.cancelEditDraw("请选择要编辑的对象！");
|
return
|
}
|
startEditMarker()
|
}
|
|
|
|
//编辑点 开始
|
function startEditMarker() {
|
var selectMarker = _selectedOverLay;
|
selectMarker.setDraggable(true);
|
var point = selectMarker.getPosition();
|
selectMarker.on("dragend", function () {
|
endEditMarker()
|
MapClickStyle(_selectedOverLay)
|
})
|
//_map.setDefaultCursor("move");//设置地图鼠标样式
|
}
|
//编辑点 结束
|
function endEditMarker() {
|
var selectMarker = _selectedOverLay;
|
selectMarker.setDraggable(false);
|
selectMarker.objInfo.Point = {
|
X: selectMarker.getPosition().getLng(),
|
Y: selectMarker.getPosition().getLat()
|
}
|
callbackObj.updateSignObj(JSON.stringify(selectMarker.objInfo));
|
}
|
|
|
//取消编辑 客户端调用
|
function cancelEditDraw() {
|
if (_selectedOverLay == null) {
|
return
|
}
|
_map.clearInfoWindow();
|
}
|
|
//删除单个覆盖物
|
function removeSignObj(id) {
|
let list = _map.getAllOverlays();
|
for (var i = 0; i < list.length; i++) {
|
let overlay = list[i];
|
if (overlay.objInfo) {
|
if (overlay.objInfo.SignId == id) {
|
_map.remove(overlay);
|
break;
|
}
|
}
|
}
|
}
|
|
//根据详细地址查看地图
|
function locateByAddress(address) {
|
var geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
var geocode = result.geocodes;
|
_map.setCenter([geocode[0].location.getLng(), geocode[0].location.getLat()]);
|
var marker = new AMap.Marker({ position: [geocode[0].location.getLng(), geocode[0].location.getLat()] });
|
_map.setFitView(marker);
|
}
|
else {
|
var error = { ErrorType: error_type.locate_address, Message: "根据详细地址定位地图失败" };
|
callbackObj.handingError(JSON.stringify(error));
|
}
|
});
|
}
|
|
|
</script>
|
</body>
|
</html>
|
