最近遇到一个业务就是需要需要在地图上标记多个区域。一般餐饮业做外卖的，配送范围一般是多区域的，那么在地图上标记配送范围的时候就需要能标记多个区域。长话短说，最初的实现原型的截图如下：
实现思路如下：
1.根据百度地图API 手册先初始化地图：http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB
2.动态添加标记小区域(此处是给地图绑定鼠标右键事件，当点击鼠标右键时就会动态创建一个矩形区域) ，期原理就是当鼠标在地图上右键点击的时候，就会得到该点在地图上的经纬度坐标，然后以这个经纬度坐标为中心绘制出矩形区域。
3.在添加矩形区域的时候需要判断，右键的这个经纬度坐标是否在已经标记的矩形区域内，如果在则给出提示，当然对于添加的个数你可以自己控制。在这里有一个关键的函数就是判断某个点知否在一个特定的区域。这个代码如下：
/**
*
* 判断某个点是否在一个特定的区域内
* @params pt 经纬度坐标
* @params poly 区域的顶点坐标点
* @return bool true | false
*/
function isInsidePolygon(pt, poly){ for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) && (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) && (c = !c); return c; }
完整代码如下(HTML 代码)：
<html> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <title>百度地图画多边形</title> </head> <body> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script> </head> <body onLoad="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px;"></div> </body> </html>
完整代码如下(JS 代码)：
<script type="text/javascript"> /** *date 20140815 *author cherry.chen *desc demo for baidu api mutiple marker **/ var map; // map 对象 var index = 1; var color = [‘#000000‘,‘#A200FF‘,‘#0000FF‘,‘#008200‘,‘#2e4987‘]; //多区域标记色块 var polygon = []; function initialize() { // 百度地图API功能 map = new BMap.Map("map_canvas"); map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 //map.setMapType(BMAP_SATELLITE_MAP); var point = new BMap.Point(108.896, 34.330); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。 var obj = new Object(); obj.lat = point.lat; obj.lng = point.lng; obj.number = 0; obj.map = map; initDymamicArea(obj); //初始化地图 //绑定右键事件 map.addEventListener("rightclick", function(e){ if(index > 3){ alert("最多添加4个区域"); return; } var pt = new BMap.Point(e.point.lng, e.point.lat); var res = false; if(polygon.length > 0){ for(var i=0;i<polygon.length;i++){ console.log(polygon[i].getBounds()); res = isInsidePolygon(pt, polygon[i].getPath()); if(res) break; } } if(res){ alert("区域重叠"); return; } var obj = new Object(); obj.lat = e.point.lat; obj.lng = e.point.lng obj.number = index; obj.map = map; initDymamicArea(obj); index++; }); } /** * * 判断某个点是否在一个特定的区域内 * @params pt 经纬度坐标 * @params poly 区域的顶点坐标点 * @return bool true | false */ function isInsidePolygon(pt, poly){ for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) && (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) && (c = !c); return c; } function initDymamicArea(obj){ var lat = obj.lat; var lng = obj.lng; var x1 = lat + 0.002; var x2 = lat - 0.002; var y1 = lng + 0.002; var y2 = lng - 0.002; var secRing = []; secRing.push(new BMap.Point(y1,x1)); secRing.push(new BMap.Point(y1,x2)); secRing.push(new BMap.Point(y2,x2)); secRing.push(new BMap.Point(y2,x1)); polygon[obj.number] = new BMap.Polygon( secRing, { strokeColor:color[obj.number], fillColor:"#AAAAAA", strokeWeight:3, strokeOpacity:0, fillOpacity:0 } ); polygon[obj.number].enableEditing(); obj.map.addOverlay(polygon[obj.number]); } </script>
对于标记多区域的触发事件你可以自己修改，这里只是一个前端的demo,如果你需要保存这些巨型区域的顶点信息，可以通过polygon.getPath() 这个函数得到，你可以选择在点击按钮时得到，或者是给 polygon 添加鼠标离开事件(mouseout),在鼠标离开时得到这个区域的顶点信息。
demo 到这里就完了。