用百度地图的API画多边形，并在多边形中加入文本标注

代码内中方法参数与数据库连接，仅供参考！

技术粗浅，不喜勿喷，谢谢

---------------------------------------------------------------------------------

<%@ 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="绘制区域" οnclick="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>

原文链接：https://blog.csdn.net/qq_39545641/article/details/78813418