在百度地图上绘制多边形并保存绘制的点的经纬度

昨天波波记录了在高德地图上绘制多边形区域，今天我们继续记录在百度地图上绘制多边形并保存绘制的点的经纬度，本篇内容来自于网络，仅供学习参考。

源码参考：

<!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" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%; height:500px; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></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 src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<title>鼠标绘制工具</title>
</head>
<body>
<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>
<div>
<input type="button" class="btn_gray" value="添加多边形" onclick="addPolyline()">
<input type="button" class="btn_gray" value="保存数据" onclick="saveData()">
</div>
<script type="text/javascript">
//记录marker、label、polyline的个数
var NUM_MARKER = 0,
NUM_LABEL = 0,
NUM_POLYLINE = 0;
var polyDefaultStyle = {
strokeColor: "#f00",
strokeOpacity: 0.6,
strokeWeight: 4
}
/*
*用于存储地图各个配置项的数据结构
*包括：地图中心点、地图的监听事件、地图的控件、地图上的覆盖物等信息
*用于获取代码的时候绘制地图
*/
var config = {
city: "北京",
center_point: new BMap.Point(116.403874, 39.914889),
zoom: 12,
container_width: 700,
container_height: 550,
enableScrollWheelZoom: true,
enableKeyboard: true,
enableDragging: true,
enableDoubleClickZoom: true,
scale_control: {
added: true,
anchor: "BMAP_ANCHOR_BOTTOM_LEFT",
type: "BMAP_UNIT_IMPERIAL"
},
nav_control: {
added: true,
anchor: "BMAP_ANCHOR_TOP_LEFT",
type: "BMAP_NAVIGATION_CONTROL_LARGE"
},
overview_control: {
added: true,
anchor: "BMAP_ANCHOR_BOTTOM_RIGHT",
isopen: true
},
label_array: [],
label_config: [],
marker_array: [],
marker_config: [],
polyline_config: [],
polyline_array: [],
polyline_name_array: []
}
// 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(116.307852, 40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
function drawMap(areaStr) {
var areaObj = JSON.parse(areaStr);
if (areaObj) {
//清空服务范围缓存
config.polyline_array = [];
//对服务范围数据进行遍历
for (var len = 0; len < areaObj.service_area.length; len++) {
var area_item = areaObj.service_area[len];
if (area_item) {
var polyPoint = [];
var name = area_item.name;
var points = area_item.points;
for (var p_num = 0; p_num < points.length; p_num++) {
var point = new BMap.Point(points[p_num].lng, points[p_num].lat);
polyPoint.push(point);
if (p_num == 0) {
map.centerAndZoom(point, 12);
}
}
//在地图上绘制服务范围区域
var polygon = new BMap.Polygon(polyPoint, {
strokeColor: polyDefaultStyle.strokeColor,
strokeWeight: polyDefaultStyle.strokeWeight,
strokeOpacity: polyDefaultStyle.strokeOpacity});
map.addOverlay(polygon);
//将服务范围加入到缓存中
config.polyline_array.push(polygon);
config.polyline_name_array.push(name);
}
}
}
}
var ranges = '{"service_area":[{"name":"多边形1","points":[{"lng":121.23036,"lat":31.218609},{"lng":121.233666,"lat":31.210579},{"lng":121.247177,"lat":31.206749},{"lng":121.276353,"lat":31.190811},{"lng":121.267442,"lat":31.237383}]}]}';
setTimeout(function () {
drawMap(ranges);
}, 1000);
</script>
<script>
// 此变量在添加标注功能时，用于记录当前的click事件的处理函数
var clickHandler;
//鼠标样式
var cursorStyle = {
"ol_marker": "hand",
"ol_polygen": "crosshair",
"ol_label": "text",
"default": "auto"
};
//添加标注时，鼠标的label信息
var labelInfo = {
"ol_marker": "左键标记，右键退出",
"ol_polygen": "左键单击开始画线，双击结束画线，右键退出",
"ol_label": "左键标记，右键退出",
"drawing_line": "双击结束画线"
};
//显示鼠标提示信息
function cursorLableShow() {
cursorLabel.show();
}
//隐藏鼠标提示信息
function cursorLabelHide() {
cursorLabel.hide();
}
//声明和初始化跟随鼠标移动的label
var cursorLabel = new BMap.Label();
cursorLabel.setOffset(new BMap.Size(10, 10));
cursorLabel.hide();
//退出标注的绘制。需要清除掉map上click的处理函数。并把鼠标设置为默认的样式
function exitDrawing(handlerToRemove) {
cursorLabel.hide();
map.setDefaultCursor(cursorStyle["default"]);
map.removeEventListener("click", handlerToRemove);
map.removeEventListener("mouseout", cursorLabelHide);
map.removeEventListener("mouseover", cursorLableShow);
}
//添加polyline的具体操作
function addPolyline() {
// initPanel();
//如果click已经有事件处理函数，先清除掉
if (clickHandler)
exitDrawing(clickHandler);
map.setDefaultCursor(cursorStyle["ol_polygen"]);
var polyPoint = [];
var polyline = null;
/*
* click事件的监听事件
* 如果没有初始化polyline变量，则初始化polyline并添加到地图
* 如果已经初始化了polyline变量，则将click的经纬度加到polyline 的路径中，并重新设定设定polyline的path
*/
function addPolyClickHandler(e) {
cursorLabel.setContent(labelInfo["drawing_line"]);
var point = e.point;
polyPoint.push(point);
//画多边形
if (!polyline) {
polyline = new BMap.Polygon(polyPoint, {
strokeColor: polyDefaultStyle.strokeColor,
strokeWeight: polyDefaultStyle.strokeWeight,
strokeOpacity: polyDefaultStyle.strokeOpacity});
polyline.setPath(polyPoint);
map.addOverlay(polyline);
polyPoint.length++;
} else {
polyline.setPath(polyPoint);
}
}
/*
* 双击(dbclick)事件的监听事件
* 清除为绘制polyline添加的几个监听函数
* 将polyline变量保存到config变量中
*/
function addPolyDdclickHandler(e) {
exitDrawing(addPolyClickHandler);
if (polyline) {
polyline.addEventListener("mouseover", function (e) {
polyline.enableEditing();
});
polyline.addEventListener("mouseout", function (e) {
polyline.disableEditing();
});
config.polyline_array.push(polyline);
config.polyline_config.push({path: polyline.getPath(),
strokeColor: polyDefaultStyle.strokeColor,
strokeWeight: polyDefaultStyle.strokeWeight,
strokeOpacity: polyDefaultStyle.strokeOpacity});
var name = "多边形" + config.polyline_array.length;
config.polyline_name_array.push(name);
}
map.removeEventListener("click", addPolyClickHandler);
map.removeEventListener("mousemove", polyMoveHandler);
map.removeEventListener("dblclick", addPolyDdclickHandler);
map.removeEventListener("rightclick", polyRemove);
//如果有允许双击放大地图，则重新加上
setTimeout(function () {
if (config.enableDoubleClickZoom)
map.enableDoubleClickZoom();
}, 1000);
}
//鼠标移动事件的监听函数
function polyMoveHandler(e) {
if (!polyline)
return;
if (polyPoint.length > 0) {
polyPoint[polyPoint.length - 1] = e.point;
cursorLabel.show();
cursorLabel.setPosition(e.point);
polyline.setPath(polyPoint);
}
}
//取消绘制折线
function polyRemove(e) {
map.removeOverlay(polyline);
exitDrawing(addPolyClickHandler);
//如果有允许双击放大地图，则重新加上
setTimeout(function () {
if (config.enableDoubleClickZoom)
map.enableDoubleClickZoom();
}, 1000);
}
clickHandler = addPolyClickHandler;
map.disableDoubleClickZoom();
map.addEventListener("click", addPolyClickHandler);
map.addEventListener("mousemove", polyMoveHandler);
map.addEventListener("dblclick", addPolyDdclickHandler);
map.addEventListener("rightclick", polyRemove);
}
/*
* 保存服务范围数据
*/
function saveData() {
if (config.polyline_array) {
var area = {
"service_area": []
};
for (var len = 0; len < config.polyline_array.length; len++) {
var pl = config.polyline_array[len];
if (pl != null) {
var points_json = [];
var points = pl.getPath();
for (var p_num = 0; p_num < points.length; p_num++) {
var point = {
"lng": points[p_num].lng,
"lat": points[p_num].lat
}
points_json[p_num] = point;
}
var item_json = {
"name": config.polyline_name_array[len],
"points": points_json
}
area.service_area[len] = item_json;
}
}
localStorage.setItem("area", JSON.stringify(area));
var gid = "2318"; //getQueryString("gid")
var city = "上海"; // getQueryString("city");
// var ranges = JSON.stringify(area);
var ranges = [{"city":city,"ranges":JSON.stringify(area)}];
var url = "/?ranges=" + JSON.stringify(ranges);
$.ajax({
type: 'get',
url: url,
data: {},
dataType: 'json',
async: false, //同步
crossDomain: true,
withCredentials: true,
success: function (data) {
if (data.code == 0) {
alert("保存成功");
}
},
error: function (error, type) {
alert("type:" + type + "error:" + error);
if (type == "abort") {
showAbortToast();
} else if (type == "timeout") {
showTimeoutToast();
}
}
});
}
}
</script>
</body>
</html>