百度地图API实现多区域标记
最近遇到一个业务就是需要需要在地图上标记多个区域。一般餐饮业做外卖的，配送范围一般是多区域的，那么在地图上标记配送范围的时候就需要能标记多个区域。长话短说，最初的实现原型的截图如下：
实现思路如下：
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 代码)：
对于标记多区域的触发事件你可以自己修改，这里只是一个前端的demo,如果你需要保存这些巨型区域的顶点信息，可以通过polygon.getPath() 这个函数得到，你可以选择在点击按钮时得到，或者是给 polygon 添加鼠标离开事件(mouseout),在鼠标离开时得到这个区域的顶点信息。
demo 到这里就完了。