使用高德地图绘制多边形区域
最近遇到一个需求,在网页上面编辑多边形的区域,并且需要能够判断一个点是否在这个多边形区域里面。
看了一下高德地图的jsapi,简单的做了一个demo。
1.你需要一个高德地图的账号,注册地址点击这里
2.登陆进去创建一个应用,这个时候就会给你一个对应的Key
3.查看高德地图的的demo,进入示例中心
4.学习一下左侧分类里面的 点标记 的示例,点标记里有涉及到高德地图事件,以及基础的类。
5.看完上面的,接下来我们接着学习折线,多边形,圆,这里我们就可以接触到AMap.Polygon这个类,以及高德地图提供编辑多边形的类AMap.PolyEditor
6.下面我们就要开始将上面的功能组合起来,进行高德地图多边形的编辑了
6.1 首先,我先用点标记在地图上选中3个点,组成一个最基本的多边形(三角形)
//用来存储3个基本点的数组 第一个存点坐标 第二个存Marker(点标记)对象 var beginPoints; var beginMarks ; //地图上面的click事件对象 var clickListener ; //当前绘制的点个数,用来控制前面3个点 var beginNum; //初始化 function init(){ beginPoints = []; beginMarks = []; beginNum = 0; clickListener = AMap.event.addListener(map, "click", mapOnClick); } init(); //地图上面绑定的点击事件 function mapOnClick(e) { // document.getElementById("lnglat").value = e.lnglat.getLng() + \',\' + e.lnglat.getLat() beginMarks.push(addMarker(e.lnglat)); beginPoints.push(e.lnglat); beginNum++; if(beginNum == 3){ //处理有了3个点以后,转化为多边形的逻辑 } }; // 实例化点标记 function addMarker(lnglat) { var marker = new AMap.Marker({ icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: lnglat }); marker.setMap(map); return marker; }
在上面的代码里需要说一点的是,高德地图的事件绑定跟java的事件绑定有些类似 clickListener = AMap.event.addListener(map, “click”, mapOnClick);
其中第一个参数是要绑定事件的对象,第二个参数是事件类型,第三个参数是对应是事件函数。取消绑定事件的方法AMap.event.removeListener(clickListener);
6.2 绘制好3个点之后,构建多边形对象,绑定对应的多边形编辑对象
//在上面的留空处,处理有了3个点以后的逻辑,继续开始 AMap.event.removeListener(clickListener); var polygon = createPolygon(beginPoints); polygonEditor = createEditor(polygon); clearMarks(); //处理结束 //上面用到的几个函数 //创建一个多边形对象 function createPolygon(arr){ var polygon = new AMap.Polygon({ map: map, path: arr, strokeColor: "#0000ff", strokeOpacity: 1, strokeWeight: 3, fillColor: "#f5deb3", fillOpacity: 0.35 }); return polygon; } //创建一个多边形对象的编辑类对象 function createEditor(polygon){ var polygonEditor = new AMap.PolyEditor(map, polygon); polygonEditor.open(); AMap.event.addListener(polygonEditor,\'end\',polygonEnd); return polygonEditor; } //编辑结束事件 function polygonEnd(res){ resPolygon.push(res.target); alert(resPolygon[resNum].contains([116.386328, 39.913818])); appendHideHtml(resNum,res.target.getPath()); resNum++; init(); } //将多边形路径保存到html隐藏域里 function appendHideHtml(index,arr){ var strify = JSON.stringify(arr); var html = \'<input type="hidden" id="index\'+index+\'" name="paths[]" value="\'+strify+\'">\'; $(\'body\').append(html); console.log(html); } //清除前面的3个点标记 function clearMarks(){ map.remove(beginMarks); }
上面的代码里需要主要的主要是 1.高德地图清除点标记,支持清除一组,按照数组清除。2.PolyEditor这个多边形编辑对象,主要使用到了open()和close()两个函数,以及end事件(当调用了close函数后触发)3.我按照多边形的次序,将他们append到html的隐藏域中,并且将id使用了index+次序的方式生成。
然后可以选择将隐藏域中的内容提交到服务器,或者做其他的处理。
下面给出一个完整的demo,希望能够给大家一点帮助~
下载点击这里
目前在做外卖领域的项目,有想合作的扫一扫吧~~~~~~~~~~