<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript" src="__PUBLIC__/admin/layer/layer.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LiFSZdkfPQkmwmWGb2gSyzA4b6BESUaP"></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/GeoUtils/1.2/src/GeoUtils_min.js"></script> <!--加载检索信息窗口--> <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"> </head> <body> <div style="margin-left: 50px;"> <lable><input type="text" id="suggestId" placeholder="请输入关键字"></lable> <div id="searchResultPanel" style="border:1px solid #C0C0C0;150px;height:auto; display:none;"></div> </div> <div id="map" style="1200px; height: 600px; margin-left: 50px;"></div> <ul> <table> <tr> <td>序号</td> <td>区域名称</td> <td>颜色</td> <td>操作</td> </tr> <foreach name="positionList" item="v" key="k"> <tr> <td><{$k}></td> <td><{$v['name']}></td>
<!--动态设置选定区域的颜色--> <td><input type="text" value="<{$v['color']}>" onblur="upColor(<{$v['id']}>,$(this))"><span style="display: inline-block; 20px;height:20px;background-color:<{$v['color']}>"></span></td> <td>
<!--删除数据中中的指定区域--> <a src="">删除</a> </td> </tr> </foreach> </table> </ul> </body> <script>
//更新数据库中的颜色 function upColor(id,event){ var color = event.val(); var id = id; $.ajax({ url:'<{:U("map/upColor")}>', type:'post', dataType:'json', data:{ color:color, id:id }, success:function(res){ if(res.status){ window.location.reload(); } } }); }
$(function(){
//实例化百度地图 var map = new BMap.Map("map"); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 map.centerAndZoom("包头",15); //设置地图中心和地图显示等级 //页面加载先后端请求区域坐标点 并且循环在地图画出已选定区域 $.ajax({ url:'<{:U("map/poList")}>', type:'post', dataType:'json', success:function(res){ if(res){ console.log(res); var polygon = []; for(var i=0;i<res.length;i++){ var arr = []; for(var x=0; x<res[i]['position'].length;x++){ let poi = new BMap.Point(parseFloat(res[i]['position'][x].lng),parseFloat(res[i]['position'][x].lat)); arr.push(poi); } polygon[i] = new BMap.Polygon(arr, //设置区域样式 {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:res[i]['color'],fillOpacity:0.3} ); map.addOverlay(polygon[i]); } } } }); function G(id) { return document.getElementById(id); } //建立一个自动完成的对象 var ac = new BMap.Autocomplete({ "input" : "suggestId", "location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 16); map.addOverlay(new BMap.Marker(pp)); //添加标注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } //右键菜单 var menu = new BMap.ContextMenu(); var item1=new BMap.MenuItem("撤销" ,function(location){ map.removeOverlay(overlays[overlays.length-1]);overlays.splice(overlays.length-1,1) }); menu.addItem(item1); map.addContextMenu(menu); var overlays = []; var overlaycomplete = function(e){ var position = []; overlays.push(e.overlay); //获取多边形端点坐标 // if (e.drawingMode == BMAP_DRAWING_RECTANGLE ) { //alert(' 所画的点个数：' + e.overlay.getPath().length); for(var i=0;i<e.overlay.getPath().length;i++){ let coordinate = new Object(); coordinate.lng = e.overlay.getPath()[i].lng; coordinate.lat = e.overlay.getPath()[i].lat; position.push(coordinate); // alert(" 点"+(i+1)+":经度"+e.overlay.getPath()[i].lng+" 纬度："+e.overlay.getPath()[i].lat); } //prompt层 // alert("面积："+BMapLib.GeoUtils.getPolygonArea(e.overlay)); // } //关闭绘制模式 drawingManager.close(); layer.prompt( {title: '添加区域名称'}, function(val, index){ if(val!==''){ $.ajax({ url:'<{:U("map/pushPosition")}>', type:'post', dataType:'json', data:{ position:JSON.stringify(position), name:val }, success:function(res){ if(res.status){ layer.close(index); window.location.reload(); } } }); }else{ layer.close(index); } } ); }; //绘制样式 var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 }; //实例化鼠标绘制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 drawingModes: [//画覆盖物工具栏上显示的可选项 BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYLINE, BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE ] }, circleOptions: styleOptions, //圆的样式 polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 }
//坐标点
var lng,lat;
point = [
new BMap.Point(lng,lat),
];
//计算坐标point 是否在polygon区域中 接口使用请查看百度地图api
BMapLib.GeoUtils.isPointInPolygon(point[0],polygon[i]);
}) </script> </html>