百度地图区域划分
来源：互联网 发布：t型电阻网络d a转换器 编辑：程序博客网 时间：2024/04/30 14:26
在百度地图上划分区域（自定义）
功能：1、在百度地图上可搜索指定地点；2、保存划分的区域的点集合；3、可编辑已划分的区域
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>配送区域划分</title><base href="http://localhost:8080/xiaoshidi/"><script type="text/javascript" src="static/js/jquery-1.7.2.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nkXoaVpNKlqm6HhdxZiAnY5Rlhdjckgw"></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" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style></head><body><div><table bgcolor="#E3E4D8"><tr><td>请输入地址：</td><td><input type="text" id="suggestId" size="20" placeholder="这里输入搜索地址" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;"></td><td><input type="button" value="搜索" onclick="theLocation();"/></td><td><input type="button" value="确认" onclick="getAllPoints();"/></td><td><input type="button" value="清除" onclick="clearAll();"/></td><td><input type="button" value="开启编辑功能" onclick="currentPolygon.enableEditing();"/></td><td><input type="button" value="关闭编辑功能" onclick="currentPolygon.disableEditing();"/></td></tr></table></div><div id="allmap"></div></body></html><script type="text/javascript">//百度地图API功能function G(id) { return document.getElementById(id);}var drawingManager,overlays = [],pointArray = []; //完成后回调 var overlaycomplete = function(e){ map.removeOverlay(pointArray[0]); //清除上一次标记 pointArray = []; overlays.push(e.overlay); //将用户点击的坐标保存进数组，方便清除 e.overlay.enableEditing(); getPoint(e.overlay.ro); pointArray.push(e.overlay); }; var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid', //边线的样式，solid或dashed。 fillColor: "none" }var map = new BMap.Map("allmap"); map.centerAndZoom("合肥", 15); var ac = new BMap.Autocomplete({ "input" : "suggestId", "location" : map }); var areapoints = [{"id":"54c1733006084908a03f9ee8f251a013","remark":"绿地中心商业区","name":"绿地中心","operdate":1484725267000,"areapoints":"31.82941_117.266574,31.827968_117.276312,31.826556_117.284432,31.820236_117.283354,31.813394_117.282815,31.813823_117.275593,31.814836_117.267149,31.815296_117.254752,31.823182_117.261795,31.823182_117.261795"},{"id":"c7f54b279c3f4513b583e026e61116e0","remark":"天鹅湖万达广场","name":"万达广场","operdate":1484792986000,"areapoints":"31.839064_117.219116,31.83253_117.219403,31.828511_117.218146,31.826763_117.219259,31.826118_117.220517,31.822713_117.23586,31.822958_117.238375,31.838512_117.23798,31.839617_117.226194,31.839586_117.222925"},{"id":"70523ac957ea4e38a49612605a9b7f07","remark":"合肥市邮政管理局","name":"合肥市邮政管理局","operdate":1484892441000,"areapoints":"31.84709_117.237845,31.842074_117.238043,31.838623_117.238169,31.838409_117.240846,31.838079_117.244116,31.83712_117.252596,31.83689_117.254455,31.836591_117.25795,31.840081_117.257833,31.847703_117.257653,31.847688_117.254886,31.84758_117.25229,31.847289_117.243738"},{"id":"661e89d0defc41fc87f5c5a9cf808ed2","remark":"华润五彩城","name":"华润五彩城","operdate":1484894056000,"areapoints":"31.838497_117.238232,31.83457_117.238411,31.830828_117.238519,31.825367_117.238663,31.824047_117.238699,31.822882_117.238735,31.823219_117.24452,31.823403_117.250592,31.823403_117.254473,31.823311_117.258426,31.82328_117.261264,31.833466_117.269349,31.835399_117.270427,31.836196_117.264283,31.83635_117.262737,31.836319_117.258138"}]; var secRing = []; var pointArray = []; var currentPolygon; if(areapoints != null){ $.each(areapoints, function(i, partition){ var str = partition.areapoints.split(","); $.each(str, function(j, item){ var poi = item.split("_"); secRing.push(new BMap.Point(poi[1],poi[0])); }); if(partition.id == ""){ //创建多边形 currentPolygon = new BMap.Polygon(secRing, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4}); //添加多边形到地图上 map.addOverlay(currentPolygon); /* currentPolygon.addEventListener('mouseover',function(){map.addOverlay(label)}) currentPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */ pointArray = pointArray.concat(currentPolygon.getPath()); /* var label = new BMap.Label(partition.name,{position:map.getCenter()}); map.addOverlay(label); */ overlays.push(currentPolygon); }else{ //创建多边形 var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4}); //添加多边形到地图上 map.addOverlay(secRingPolygon); /* secRingPolygon.addEventListener('mouseover',function(){map.addOverlay(label)}) secRingPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */ pointArray = pointArray.concat(secRingPolygon.getPath()); /* var label= new BMap.Label(partition.name,{position:map.getCenter()}); map.addOverlay(label); */ } map.setViewport(pointArray); //调整视野 secRing.length = 0; }); } map.enableScrollWheelZoom(); drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8, //工具栏缩放比例 //工具栏显示数据 drawingModes:[ BMAP_DRAWING_MARKER, BMAP_DRAWING_POLYGON ] }, polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); drawingManager.addEventListener('overlaycomplete', overlaycomplete); function getBoundary(currentSecRing){ alert(currentSecRing.length); var pointArray = []; for (var i = 0; i < currentSecRing.length; i++) { var ply = new BMap.Polygon(currentSecRing[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 ply.addEventListener('mouseover',function(){map.addOverlay(label)}) ply.addEventListener('mouseout',function(){map.removeOverlay(label)}) pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //调整视野 var label=new BMap.Label('文字内容',{position:map.getCenter()}); } //获取用户点击的坐标，并保存到字符串中 function getPoint(el){ var locations = ''; $.each(el, function(i,e) { if(el.length == i){ return; } if(i>0){ locations +=','; } locations +=e.lat+"_"+e.lng; }); opener.document.getElementById("areapoints").value=locations; this.jsons = locations;} // 清除标记function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0; } // 用经纬度设置地图中心点function theLocation(){// 百度地图API功能var myPlace = document.getElementById("suggestId").value;//map.clearOverlays(); //清除地图上所有覆盖物function myFun(){var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 15);map.addOverlay(new BMap.Marker(pp)); //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun});local.search(myPlace);}function getAllPoints(){$.each(overlays, function(i, item){alert(item.ro.length);getPoint(item.ro)});}</script>升级后：（1、增加鼠标放在区域上时高亮；2、添加中心标注点和标注信息；3、可修改区域范围大小和标注点的位置）
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>配送区域划分</title><base href="http://localhost:8080/xiaoshidi/"><script type="text/javascript" src="static/js/jquery-1.7.2.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nkXoaVpNKlqm6HhdxZiAnY5Rlhdjckgw"></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" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style></head><body><div><table bgcolor="#E3E4D8"><tr><td>请输入地址：</td><td><input type="text" id="suggestId" size="20" placeholder="这里输入搜索地址" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;"></td><td><input type="button" value="搜索" onclick="theLocation();"/></td><td><input type="button" value="确认" onclick="getAllPoints();"/></td><td><input type="button" value="清除" onclick="clearAll();"/></td><td><input type="button" value="开启编辑功能" onclick="currentPolygon.enableEditing();"/></td><td><input type="button" value="关闭编辑功能" onclick="currentPolygon.disableEditing();"/></td></tr></table></div><div id="allmap"></div></body></html><script type="text/javascript">//百度地图API功能function G(id) { return document.getElementById(id);}var drawingManager,centerPoint,centerMarker,currentMode,overlays = [],overlays_clear = [],pointArray = []; //完成后回调 var overlaycomplete = function(e){if(e.drawingMode == currentMode){map.removeOverlay(pointArray[0]); //清除上一次标记 } pointArray = []; currentMode = e.drawingMode; // 点 if (e.drawingMode == BMAP_DRAWING_MARKER) { e.overlay.enableDragging(); centerPoint = e.overlay; } // 圆形 if (e.drawingMode == BMAP_DRAWING_CIRCLE) { alert('半径：' + e.overlay.getRadius()); alert('中心点：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat); } // 折线、多边形、矩形 if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) { overlays.push(e.overlay); //将用户点击的坐标保存进数组，方便清除 e.overlay.enableEditing(); //getPoint(e.overlay.ro); } pointArray.push(e.overlay); }; var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid', //边线的样式，solid或dashed。 fillColor: "none" }function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];function generateMixed(n) { var res = "#"; for(var i = 0; i < n ; i ++) { var id = Math.ceil(Math.random()*35); res += chars[id]; } return res;}var map = new BMap.Map("allmap"); map.centerAndZoom("合肥", 15); var ac = new BMap.Autocomplete({ "input" : "suggestId", "location" : map }); var areapoints = [{"id":"54c1733006084908a03f9ee8f251a013","remark":"绿地中心商业区","name":"绿地中心","centerpoint":"117.272313,31.822636","operdate":1485067145000,"areapoints":"31.82941_117.266574,31.827968_117.276312,31.826556_117.284432,31.820236_117.283354,31.813394_117.282815,31.813823_117.275593,31.814836_117.267149,31.815296_117.254752,31.823182_117.261795,31.823182_117.261795"},{"id":"c7f54b279c3f4513b583e026e61116e0","remark":"天鹅湖万达广场","name":"万达广场","centerpoint":"117.228117,31.830429","operdate":1485067164000,"areapoints":"31.839064_117.219116,31.83253_117.219403,31.828511_117.218146,31.826763_117.219259,31.826118_117.220517,31.822713_117.23586,31.822958_117.238375,31.838512_117.23798,31.839617_117.226194,31.839586_117.222925"},{"id":"70523ac957ea4e38a49612605a9b7f07","remark":"合肥市邮政管理局","name":"合肥市邮政管理局","centerpoint":"117.248814,31.841595","operdate":1485067200000,"areapoints":"31.84709_117.237845,31.842074_117.238043,31.838623_117.238169,31.838409_117.240846,31.838079_117.244116,31.83712_117.252596,31.83689_117.254455,31.836591_117.25795,31.840081_117.257833,31.847703_117.257653,31.847688_117.254886,31.84758_117.25229,31.847289_117.243738"},{"id":"661e89d0defc41fc87f5c5a9cf808ed2","remark":"华润五彩城","name":"华润五彩城","centerpoint":"117.249892,31.830613","operdate":1485066027000,"areapoints":"31.838497_117.238232,31.83457_117.238411,31.830828_117.238519,31.825367_117.238663,31.824047_117.238699,31.822882_117.238735,31.823219_117.24452,31.823403_117.250592,31.823403_117.254473,31.823311_117.258426,31.82328_117.261264,31.833466_117.269349,31.835399_117.270427,31.836196_117.264283,31.83635_117.262737,31.836319_117.258138"},{"id":"f7659868d2cd4a6681737fcf6b74f544","remark":"ceshi","name":"ceshi","centerpoint":"117.202749,31.829999","operdate":1485078774000,"areapoints":"31.850613_117.207923,31.836503_117.210726,31.829079_117.208929,31.828527_117.197646,31.834171_117.195706,31.840798_117.19779"}]; var secRing = []; var pointArray = []; var currentPolygon; if(areapoints != null){ $.each(areapoints, function(i, partition){ var str = partition.areapoints.split(","); $.each(str, function(j, item){ var poi = item.split("_"); secRing.push(new BMap.Point(poi[1],poi[0])); }); var centerp = partition.centerpoint.split(","); var secRingCenter = new BMap.Point(centerp[0],centerp[1]); centerMarker = new BMap.Marker(secRingCenter); map.addOverlay(centerMarker); //创建标签 var secRingLabel = new BMap.Label(partition.name,{offset:new BMap.Size(10,-30),position: secRingCenter}); map.addOverlay(secRingLabel); if(partition.id == ""){ //创建多边形 currentPolygon = new BMap.Polygon(secRing, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4}); //添加多边形到地图上 map.addOverlay(currentPolygon); /* currentPolygon.addEventListener("mouseover",function(){ currentPolygon.setStrokeColor("red"); //map.addOverlay(secRingLabel); //map.panTo(secRingCenter); }); currentPolygon.addEventListener("mouseout",function(){ currentPolygon.setStrokeColor("blue"); //map.removeOverlay(secRingLabel); }); */ /* currentPolygon.addEventListener('mouseover',function(){map.addOverlay(label)}) currentPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */ pointArray = pointArray.concat(currentPolygon.getPath()); /* var label = new BMap.Label(partition.name,{position:map.getCenter()}); map.addOverlay(label); */ centerPoint = centerMarker; overlays.push(currentPolygon); // 清除 overlays_clear.push(centerMarker); overlays_clear.push(secRingLabel); overlays_clear.push(currentPolygon); }else{ //创建多边形 var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4}); //添加多边形到地图上 map.addOverlay(secRingPolygon); secRingPolygon.addEventListener("mouseover",function(){ secRingPolygon.setStrokeColor("red"); //map.addOverlay(secRingLabel); // map.panTo(secRingCenter); }); secRingPolygon.addEventListener("mouseout",function(){ secRingPolygon.setStrokeColor("blue"); //map.removeOverlay(secRingLabel); }); /* secRingPolygon.addEventListener('mouseover',function(){map.addOverlay(label)}) secRingPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */ pointArray = pointArray.concat(secRingPolygon.getPath()); /* var label= new BMap.Label(partition.name,{position:map.getCenter()}); map.addOverlay(label); */ } map.setViewport(pointArray); //调整视野 secRing.length = 0; }); } map.enableScrollWheelZoom(); drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8, //工具栏缩放比例 //工具栏显示数据 drawingModes:[ BMAP_DRAWING_MARKER, BMAP_DRAWING_POLYGON ] }, polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); drawingManager.addEventListener('overlaycomplete', overlaycomplete); function getBoundary(currentSecRing){ alert(currentSecRing.length); var pointArray = []; for (var i = 0; i < currentSecRing.length; i++) { var ply = new BMap.Polygon(currentSecRing[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 ply.addEventListener('mouseover',function(){map.addOverlay(label)}) ply.addEventListener('mouseout',function(){map.removeOverlay(label)}) pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //调整视野 var label=new BMap.Label('文字内容',{position:map.getCenter()}); } //获取用户点击的坐标，并保存到字符串中 function getPoint(el){ var locations = ''; $.each(el, function(i,e) { if(el.length == i){ return; } if(i>0){ locations +=','; } locations +=e.lat+"_"+e.lng; }); opener.document.getElementById("areapoints").value = locations; this.jsons = locations;} // 清除标记function clearAll() { for(var i = 0; i < overlays_clear.length; i++){ map.removeOverlay(overlays_clear[i]); } overlays_clear.length = 0; } // 用经纬度设置地图中心点function theLocation(){// 百度地图API功能var myPlace = document.getElementById("suggestId").value;//map.clearOverlays(); //清除地图上所有覆盖物function myFun(){var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 15);map.addOverlay(new BMap.Marker(pp)); //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun});local.search(myPlace);}// 确认时获取多边形坐标集function getAllPoints(){opener.document.getElementById("centerpoint").value = centerPoint.getPosition().lng + ',' + centerPoint.getPosition().lat; $.each(overlays, function(i, item){getPoint(item.ro)});}// 开启编辑function openEditing(){currentPolygon.enableEditing();centerMarker.enableDragging();}// 关闭编辑function closeEditing(){currentPolygon.disableEditing();centerMarker.disableDragging();}</script> 0 0
- 百度地图区域划分
- 百度地图--南京行政区域划分
- 百度地图绘制矩形区域
- 百度地图区域边界显示
- 百度地图API多行政区域划分
- 百度地图根据可视区域显示标注
- 百度地图指定区域画边框
- 百度地图画出区域并获取区域坐标范围
- 百度地图绘制地图区域，并返回坐标
- 使用百度地图进行区域搜索与定位
- 使用百度地图进行区域搜索与定位
- 【百度地图API】自行获取区域经纬度的工具
- 百度和谷歌地图显示区域轮廓示例
- 【百度地图API】自行获取区域经纬度的工具
- 【百度地图API】自行获取区域经纬度的工具
- 百度地图javascriptAPI自行获取区域的坐标
- iOS 百度地图 设置显示区域 中心点和范围
- iOS百度地图在线建议api做搜索区域推荐
- 基于CentOS平台的Snort+Barnyard安装步骤
- 插入排序 和 希尔排序 java
- 336---instanceof
- C语言——指针入门
- POJ 1562 Oil Deposits
- 百度地图区域划分
- git 误传大文件如何删除
- 2种交换排序算法（php）
- Lua和C++交互详细总结
- 【图论】【二叉树】以先序字符串方式建立二叉树
- JQuery DOM Manipulation
- spark性能调优六
- shell编写
- 关于makefile中 .PHONY的使用
