版權所有，未經本人允許，禁止轉載！
這個界面功能是，普通覆蓋物，以及多邊形覆蓋物，及他們的描述信息的添加，修改，刪除，查看功能，還有多邊形根據名稱查詢功能；
由於這個界面的數據是存在數據庫，還有後臺代碼，所以這個頁面無法直接使用；
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>車輛選擇</title>
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=NuM5mHGLj3VEQMnYeTOghMNG"></script>
<!--加載鼠標繪製工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{height:500px;width:100%;}
</style>
</head>
<body>
<div id="allmap"></div>
<form action="${ctx}/maomarker/mappol" type="get">
關鍵字：<input type="text" id="searchparam" name="name" value="${param.name }"><input type="submit" id="searchbtn" value="區域搜索">
</form>
<p>要保存覆蓋物，右擊覆蓋物點編輯中的保存按鈕！</p>
</body>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var opts = {
anchor : BMAP_ANCHOR_TOP_RIGHT
}; //設置縮放條的位置
map.addControl(new BMap.NavigationControl(opts)); //添加縮放條控件
//搜索功能
/* var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
function searchsome(){
var searchparam=$("#searchparam").val();
local.search(searchparam);
} */
/*
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15); */
/*********************************************/
//給頁面添加右鍵
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{text:'設置標註',callback:addmark}
];
for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
//設置標註
function addmark(e){
var lng=e.lng;
var lat=e.lat;
var addpoint=new BMap.Point(lng , lat);
var marker= addAllmarker(addpoint);
//提示未編輯信息
marker.addEventListener(
"click",
function() {
top.$.jBox.tip("該標註信息爲空！");
});
}
function addAllmarker(addpoint){
//這裏順序很重要一定要在添加覆蓋物r前給marker配置右鍵1-2-3-4
//給標註添加右鍵
//1
var marker = new BMap.Marker(addpoint);
//2
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('編輯',editMarker.bind(marker)));
markerMenu.addItem(new BMap.MenuItem('刪除',removeMarker.bind(marker)));
//添加覆蓋物
//3
map.addOverlay(marker);//增加點
//4
marker.addContextMenu(markerMenu);
return marker;
}
//填出編輯框
var editMarker = function(e,ee,marker){
var sContent =
"<div>"+
"<form method='post' action='${ctx}/maomarker/mapmarker/save'>"+
" 名稱：<input type='text' name='name'></br>"+
" 地址：<input type='text' name='address'></br>"+
" 電話：<input type='text' name='phone'></br>"+
" <input type='hidden' value='"+marker.point.lng+"' name='lng'>"+
" <input type='hidden' value='"+marker.point.lat+"' name='lat'>"+
" <input type='submit' value='保存' >"+
"<form>"+
"</div>";
var opts = {
title : "信息編輯", // 信息窗口標題
enableMessage:false//設置允許信息窗發送短息
} ;
var infoWindow = new BMap.InfoWindow(sContent,opts); // 創建信息窗口對象
marker.openInfoWindow(infoWindow);
}
var removeMarker = function(e,ee,marker){
map.removeOverlay(marker);
}
/*********************************************/
//<c:if test="${empty markerlist}">
top.$.jBox.tip("暫無標註！");
map.centerAndZoom(new BMap.Point(120.522798,37.610406), 15);
//</c:if>
//<c:forEach var="ls" items="${markerlist}" begin="0">
var longitude = "${ls.lng}";
var latitude = "${ls.lat}";
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
//marker = new BMap.Marker(point); // 創建標註
//marker =addAllmarker(point);
//map.addOverlay(marker);
/****************************************/
var overs = {
myMarker:[],
myPolygon: [],
myOverlay: []
}
/********/
//信息修改頁面
var saveEditMarker = function(e,ee,marker){
var sContent =
"<div>"+
"<form method='post' action='${ctx}/maomarker/mapmarker/save'>"+
" 名稱：<input type='text' value='${ls.name}' name='name'></br>"+
" 地址：<input type='text' value='${ls.address }' name='address'></br>"+
" 電話：<input type='text' value='${ls.phone}' name='phone'></br>"+
" <input type='hidden' value='${ls.id}' name='id'>"+
" <input type='hidden' value='${ls.lng}' name='lng'>"+
" <input type='hidden' value='${ls.lat}' name='lat'>"+
" <input type='submit' value='保存' >"+
"</form>"+
"</div>";
var opts = {
title : "信息編輯", // 信息窗口標題
enableMessage:false//設置允許信息窗發送短息
}
var infoWindow = new BMap.InfoWindow(sContent,opts); // 創建信息窗口對象
marker.openInfoWindow(infoWindow);
};
var saveRemoveMarker = function(e,ee,marker){
map.removeOverlay(marker);
$.ajax({
url:"${ctx}/maomarker/mapmarker/savedelete",
post:"post",
data:{"id":"${ls.id}"},
dataType:"json",
success:function(data){
top.$.jBox.tip(data);
}
});
};
//這裏順序很重要一定要在添加覆蓋物r前給marker配置右鍵1-2-3-4
//給標註添加右鍵
//1
var marker = new BMap.Marker(point);
//2
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('編輯',saveEditMarker.bind(marker)));
markerMenu.addItem(new BMap.MenuItem('刪除',saveRemoveMarker.bind(marker)));
//添加覆蓋物
//3
map.addOverlay(marker);//增加點
//4
marker.addContextMenu(markerMenu);
//將覆蓋物填入數組中
overs.myMarker.push(marker);
overs.myOverlay.push(marker);
/******************************/
//點擊彈出信息
marker.addEventListener(
"click",
function() {
var opts = {
enableMessage : false, //去掉髮送信息到手機的標誌
width : 230, // 信息窗口寬度
height : 80, // 信息窗口高度
};
infoWindow = new BMap.InfoWindow(
"<div style='line-height:1.8em;font-size:12px;'>"
+ "<b>名稱:</b>"
+ "${ls.name }"
+ "<br /><b>地址:</b>"
+ "${ls.address }"
+ "<br /><b>電話:</b>"
+ "${ls.phone}"
+ "<br /><b>座標：</b>"
+ "(${ls.lng},${ls.lat})"
+ "</div>",
opts);
this.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口
});
//</c:forEach>
//給地圖加rightclick事件，存右擊時的座標.
/* var pointwindow;
map.addEventListener("rightclick", function(e){
pointwindow=new BMap.Point(e.point.lng,e.point.lat);
console.log(pointwindow);
console.log("******************");
});
map.addEventListener("click", function(e){
console.log(e.point.lng+","+e.point.lat);
}); */
var editPol = function(e,ee,pol){
var list=pol.eh;
var coordinator="";
if(list.length>0){
for(var i=0;i<list.length;i++){
var end=i==list.length-1?"":";";
coordinator=coordinator+list[i].lng+","+list[i].lat+end;
}
var pointwindow=new BMap.Point(list[1].lng,list[1].lat);
var sContent =
"<div>"+
"<form method='post' action='${ctx}/maomarker/mappol/save'>"+
" 名稱：<input type='text' name='name'></br>"+
" 備註：<textarea name='remarks'></textarea></br>"+
" <input type='hidden' value='"+coordinator+"' name='coordinator'>"+
" <input type='submit' value='保存' >"+
"</form>"+
"</div>";
var opts = {
title : "信息編輯", // 信息窗口標題
enableMessage:false//設置允許信息窗發送短息
};
var infoWindowpol = new BMap.InfoWindow(sContent,opts); // 創建信息窗口對象
map.openInfoWindow(infoWindowpol,pointwindow);
}else{
}
};
var removePol=function(e,ee,pol){
map.removeOverlay(pol);
};
var bmap = {
drawingManager: '',
styleOptions: {
strokeColor:"red", //邊線顏色。
fillColor:"red", //填充顏色。當參數爲空時，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以像素爲單位。
strokeOpacity: 0.8, //邊線透明度，取值範圍0 - 1。
fillOpacity: 0.3, //填充的透明度，取值範圍0 - 1。
strokeStyle: 'solid' //邊線的樣式，solid或dashed。
},
/**
* 實例化
*/
init: function(){
var styleOptions = this.styleOptions;
map.enableScrollWheelZoom();
//實例化鼠標繪製工具
this.drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啓繪製模式
enableDrawingTool: true, //是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
scale: 0.8 //工具欄縮放比例
},
circleOptions: styleOptions, //圓的樣式
polylineOptions: styleOptions, //線的樣式
polygonOptions: styleOptions, //多邊形的樣式
rectangleOptions: styleOptions //矩形的樣式
});
//添加鼠標繪製工具監聽事件，用於獲取繪製結果
this.drawingManager.addEventListener('overlaycomplete', bmap.overlaycomplete);
},
/* loadMyOverlay: function(overlay){
myPolygon = new BMap.Polygon(overlay, this.styleOptions);
this.myPolygon = myPolygon;
try{
myPolygon.enableEditing();
}catch(e){
};
var polMenu=new BMap.ContextMenu();
polMenu.addItem(new BMap.MenuItem('編輯',saveEditPol.bind(myPolygon)));
polMenu.addItem(new BMap.MenuItem('刪除',saveRemovePol.bind(myPolygon)));
polMenu.addItem(new BMap.MenuItem('設置標註',addmark));
//3
map.addOverlay(myPolygon);
myPolygon.addContextMenu(polMenu);
},
showLatLon: function(a){
var len=a.length;
var arr = [];
for(var i =0 ; i < len-1; i++){
arr.push([a[i].lng, a[i].lat]);
}
this.overlaysCache = arr;
}, */
/**
*回調獲得覆蓋物信息
*/
overlaycomplete: function(e){
/* bmap.myPolygon.push(e.overlay);
bmap.myOverlay.push(e.overlay); */
e.overlay.enableEditing();
//2
var polMenu=new BMap.ContextMenu();
polMenu.addItem(new BMap.MenuItem('編輯',editPol.bind(e.overlay)));
polMenu.addItem(new BMap.MenuItem('刪除',removePol.bind(e.overlay)));
polMenu.addItem(new BMap.MenuItem('設置標註',addmark));
e.overlay.addContextMenu(polMenu);
//提示未編輯信息
e.overlay.addEventListener(
"click",
function() {
top.$.jBox.tip("該區域信息爲空！");
});
},
/**
* 清除覆蓋物
clearAll: function() {
var overlays = this.overlays;
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
this.overlays.length = 0
map.removeOverlay(this.myPolygon);
this.myPolygon = '';
}*/
};
//<c:forEach var="pol" items="${pollist}" begin="0">
var coor="${pol.coordinator}";
var coors=coor.split(";");
var overlay=[];
for(var i=0;i<coors.length;i++){
var lnglat=coors[i].split(",");
overlay.push(new BMap.Point(lnglat[0],lnglat[1]));
}
polygon = new BMap.Polygon(overlay, bmap.styleOptions);
try{ polygon.enableEditing(); }catch(e){}
/**********************************/
var saveEditPol = function(e,ee,pol){
var list=pol.eh;
var coordinator="";
if(list.length>0){
for(var i=0;i<list.length;i++){
var end=i==list.length-1?"":";";
coordinator=coordinator+list[i].lng+","+list[i].lat+end;
}
/* console.log(rightclickPoint);
var pointwindow=new BMap.Point(rightclickPoint.lng,rightclickPoint.lat);
console.log(pointwindow); */
var pointwindow=new BMap.Point(list[1].lng,list[1].lat);
var sContent =
"<div>"+
"<form method='post' action='${ctx}/maomarker/mappol/save'>"+
" 名稱：<input type='text' name='name' value='${pol.name}'></br>"+
" 備註：<textarea name='remarks'>${pol.remarks}</textarea></br>"+
" <input type='hidden' value='"+coordinator+"' name='coordinator'>"+
" <input type='hidden' value='${pol.id}' name='id'>"+
" <input type='submit' value='保存' >"+
"</form>"+
"</div>";
var opts = {
title : "信息編輯", // 信息窗口標題
enableMessage:false//設置允許信息窗發送短息
}
var infoWindowpol = new BMap.InfoWindow(sContent,opts); // 創建信息窗口對象
map.openInfoWindow(infoWindowpol,pointwindow);
}
};
var saveRemovePol = function(e,ee,pol){
map.removeOverlay(pol);
$.ajax({
url:"${ctx}/maomarker/mappol/savedelete",
post:"post",
data:{"id":"${pol.id}"},
dataType:"json",
success:function(data){
top.$.jBox.tip(data);
}
});
};
/*************************************/
var polMenu=new BMap.ContextMenu();
polMenu.addItem(new BMap.MenuItem('編輯',saveEditPol.bind(polygon)));
polMenu.addItem(new BMap.MenuItem('刪除',saveRemovePol.bind(polygon)));
polMenu.addItem(new BMap.MenuItem('設置標註',addmark));
//3
map.addOverlay(polygon);
polygon.addContextMenu(polMenu);
//將多邊形覆蓋物填入數組中
overs.myPolygon.push(polygon);
overs.myOverlay.push(polygon);
/*************************************/
polygon.addEventListener("click",function(e){
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
enableMessage : false, //去掉髮送信息到手機的標誌
width : 230, // 信息窗口寬度
height : 80, // 信息窗口高度
};
infoWindow = new BMap.InfoWindow(
"<div style='line-height:1.8em;font-size:12px;'>"
+ "<b>名稱:</b>"
+ "${pol.name }"
+ "<br /><b>備註:</b>"
+ "${pol.remarks}"
+ "</div>",
opts);
map.openInfoWindow(infoWindow, point); // 打開信息窗口
});
//</c:forEach>
bmap.init();
</script>
</html>
