用百度地圖的API畫多邊形，並在多邊形中加入文字標註
阿新 • • 發佈：2019-02-14
程式碼內中方法引數與資料庫連線，僅供參考！
技術粗淺，不喜勿噴，謝謝
---------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<jsp:include page="../../../inc.jsp"></jsp:include>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap {
margin-right: 300px;
height: 100%;
width: 100%;
overflow: hidden;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Xpn5CoFXh7Ezel6rNXiI4XjNPOytHFuc"></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" />
<!--載入檢索資訊視窗-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<!--載入檢索資訊視窗-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title>區域衛星檢視</title>
</head>
<body>
<input type="button" value="繪製區域" onclick="draw(BMAP_DRAWING_POLYGON)" />
<div id="allmap" style="overflow: hidden; zoom: 1; position: relative;">
<div id="map" style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript">
selectAll();
function selectAll() {
$.ajax({
url : '${pageContext.request.contextPath}/area/areaAction!getCount.action',
dataType : 'json',
success : function(result) {
var Point = [];
if (result != undefined&& result!=null) {
for (var i = 0; i < result.length; i++) {
var coordinate = result[i].coordinate;
var cArr = coordinate.split(";");
var address = '';
Point = [];
for(var j = 0; j< cArr.length; j++){
var cArrs = cArr[j].split(",");
var lng = cArrs[0];
var lat = cArrs[1];
if(lng == null && lng == "" ){
continue;
}
if(lat !=null && lat != undefined){
address = new BMap.Point(lng,lat);
Point.push(address);
}
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'區域名稱：'+ result[i].areaName + '</div>';
}
showPolygon(Point,result[i].areaId,content);
}
}
}
});
}
// 百度地圖API功能
//var map = new BMap.Map('map');
var map = new BMap.Map("allmap",{mapType: BMAP_HYBRID_MAP}); // 設定衛星圖為底圖
var poi = new BMap.Point(119.613043,31.120854);
map.centerAndZoom(poi, 18);
map.enableScrollWheelZoom();
var overlays = [];
//繪製多邊形的樣式
var styleOptions = {
strokeColor:"red", //邊線顏色。
fillColor:"blue", //填充顏色。當引數為空時，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以畫素為單位。
strokeOpacity: 0.6, //邊線透明度，取值範圍0 - 1。
fillOpacity: 0.6, //填充的透明度，取值範圍0 - 1。
strokeStyle: 'solid' //邊線的樣式，solid或dashed。
}
//例項化滑鼠繪製工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪製模式
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
},
polygonOptions: styleOptions, //多邊形的樣式
});
//開啟繪製
function draw(type){
drawingManager.open();
drawingManager.setDrawingMode(type);
}
//獲取資料庫資料建立多邊形
function showPolygon(Point,pId,pName){
var polygon = new BMap.Polygon(Point,styleOptions);
map.addOverlay(polygon);
var polygonMenu = new BMap.ContextMenu();
/*-----------------多邊形右鍵編輯-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('編輯', function (){
editPolygon(polygon,pId);
}));
/*-----------------多邊形右鍵編輯-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('儲存座標', function (){
addPolygon(pId);
}));
/*-----------------多邊形右鍵編輯-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('修改名稱', function (){
editArea(pId);
}));
/*-----------------多邊形右鍵刪除-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('刪除', function () {
delpolygon(polygon,pId);
}));
polygon.addContextMenu(polygonMenu);
showText(polygon,pName);
}
//修改多邊形方法
function Editing(state){
for(var i = 0; i < overlays.length; i++){
state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();
}
}
//座標陣列獲取資料儲存
var coordinateList = "";
//回撥獲得覆蓋物資訊
var overlaycomplete = function(e){
if (e.drawingMode == BMAP_DRAWING_POLYGON) {
overlays.push(e.overlay);
if(e.overlay.getPath().length > 500){
alert("座標儲存數量過多,無法儲存");
return;
}
for(var j = 0; j < e.overlay.getPath().length; j++){
coordinateList += e.overlay.getPath()[j].lng +","+ e.overlay.getPath()[j].lat +";"
}
//繪製多邊形
var polygon = e.overlay;
var polygonMenu = new BMap.ContextMenu();
/*-----------------多邊形右鍵儲存-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('儲存區域', function (){
addFun();
}));
/*-----------------多邊形右鍵刪除-------------------------*/
polygonMenu.addItem(new BMap.MenuItem('刪除區域', function () {
map.removeOverlay(polygon);
}));
polygon.addContextMenu(polygonMenu);
}
};
//新增滑鼠繪製工具監聽事件，用於獲取繪製結果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
//顯示資訊
function showText(polygon,pName){
//或的多邊形的所有頂點
var point = getCenterPoint(polygon.getPath());
//獲得中心點
var label=new BMap.Label(pName, {offset:new BMap.Size(-40,-25), position:point});
label.setStyle( {color : "#000", fontSize : "14px", backgroundColor :"0.05",border :"0", fontWeight :"bold" });//對label 樣式隱藏
polygon.addEventListener('mouseover',function(){map.addOverlay(label)});
polygon.addEventListener('mouseout',function(){map.removeOverlay(label)})
}
/**
* 獲得圖形的中心點
*/
function getCenterPoint(path)
{
var x = 0.0;
var y = 0.0;
for(var i=0;i<path.length;i++){
x=x+ parseFloat(path[i].lng);
y=y+ parseFloat(path[i].lat);
}
x=x/path.length;
y=y/path.length;
return new BMap.Point(x,y);
}
function addFun(){
var dialog = parent.modalDialog({
title : '新增區域資訊',
iconCls : 'ext-icon-note_add',
url : '${pageContext.request.contextPath}/page/admin/area/addArea.jsp?coordinate='+ coordinateList,
height: 200,
buttons : [{
text : '儲存',
iconCls : 'ext-icon-save',
handler : function() {
dialog.find('iframe').get(0).contentWindow.submitForm(dialog,parent.$);
window.location.reload();
}
}],
})
}
function editArea(pId){
var dialog = parent.modalDialog({
title : '編輯區域資訊',
iconCls : 'ext-icon-note_edit',
url : '${pageContext.request.contextPath}/page/admin/area/editArea.jsp?id=' + pId,
height: 200,
buttons : [ {
text : '儲存',
iconCls : 'ext-icon-save',
handler : function() {
dialog.find('iframe').get(0).contentWindow.submitForm(dialog, parent.$);
window.location.reload();
}
}],
});
}
function delpolygon(polygon,pId){
map.removeOverlay(polygon);
$.ajax({
url : '${pageContext.request.contextPath}/area/areaAction!delete.action',
data : {
'id' : pId
},
dataType : 'json',
success : function(result) {
if (result != undefined && result != null) {
alert("刪除成功！")
}else{
alert("刪除失敗！")
}
}
});
}
//編輯現有多邊形
function editPolygon(polygon,pId){
if(pId != null){
overlays.push(polygon);
Editing('enable');
}
}
function addPolygon(pId){
getPoint();
Editing('disable');
$.ajax({
url : '${pageContext.request.contextPath}/area/areaAction!updateCoordinate.action',
data : {
'areaId' : pId,
'coordinate':Points
},
dataType : 'json',
success : function(result) {
if (result != undefined && result != null) {
alert("修改成功！")
}else{
alert("修改失敗！")
}
},
});
}
var Points = '';
function getPoint(){
Points = '';
for(var i = 0; i < overlays.length; i++){
if(overlays.length.length > 500){
alert("座標儲存數量過多,無法儲存");
return;
}
var overlay=overlays[i].getPath();
Points = '';
for(var j = 0; j < overlay.length; j++){
var grid =overlay[j];
Points += grid.lng+","+grid.lat+";";
}
}
}
</script>
</body>
</html>