码上快乐

相关内容   简体   繁体

百度地图API 绘制矩形多边形等覆盖物

本文转载自  查看原文  2021-03-16 17:34  524    转载/ 插件/ JS 
 

 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6     <style type="text/css">
  7     body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  8     #allmap {width: 100%; height:500px; overflow: hidden;}
  9     #result {width:100%;font-size:12px;}
 10     dl,dt,dd,ul,li{
 11         margin:0;
 12         padding:0;
 13         list-style:none;
 14     }
 15     p{font-size:12px;}
 16     dt{
 17         font-size:14px;
 18         font-family:"微软雅黑";
 19         font-weight:bold;
 20         border-bottom:1px dotted #000;
 21         padding:5px 0 5px 5px;
 22         margin:5px 0;
 23     }
 24     dd{
 25         padding:5px 0 0 5px;
 26     }
 27     li{
 28         line-height:28px;
 29     }
 30     </style>
 31      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859"></script>
 32     <!--加载鼠标绘制工具-->
 33     <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
 34     <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
 35     <!--加载检索信息窗口-->
 36     <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
 37     <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
 38     <title>百度地图API功能演示</title>
 39 </head>
 40 <body>
 41     <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 
 42         <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
 43        </div>
 44     </div>
 45     <div id="result">
 46         <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
 47         <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
 48         <input type="button"  value="获取多边形的顶点" onclick="getPoint()"/><br/>
 49         <input type="button"  value="开启线、面编辑功能" onclick="Editing('enable')"/>
 50         <input type="button"  value="关闭线、面编辑功能" onclick="Editing('disable')"/>
 51         <input type="button"  value="显示原有多边形" onclick="showPolygon(this)" /><br/>
 52 
 53         <input type="button"  value="画多边形" onclick="draw(BMAP_DRAWING_POLYGON)" />
 54          <input type="button"  value="画矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)" />
 55           <input type="button"  value="画线" onclick="draw(BMAP_DRAWING_POLYLINE)" /> 
 56           <!-- <input type="button"  value="画点" onclick="draw(BMAP_DRAWING_MARKER)" />-->
 57           <span>右键获取任意点的经纬度</span>
 58     </div>
 59     <div id="resultShape"></div>
 60      <div id="shape">坐标为</div>
 61 
 62 <script type="text/javascript">
 63     function $(id){
 64     return document.getElementById(id);
 65 }
 66 
 67     // 百度地图API功能
 68     var map = new BMap.Map('map');
 69     var poi = new BMap.Point(113.948913,22.530844);
 70     map.centerAndZoom(poi, 16);
 71     map.enableScrollWheelZoom();  
 72     var overlays = [];
 73     var overlaycomplete = function(e){
 74         overlays.push(e.overlay); 
 75     };
 76     var styleOptions = {
 77         strokeColor:"red",    //边线颜色。
 78         fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
 79         strokeWeight: 3,       //边线的宽度，以像素为单位。
 80         strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
 81         fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
 82         strokeStyle: 'solid' //边线的样式，solid或dashed。
 83     }
 84 
 85     //实例化鼠标绘制工具
 86     var drawingManager = new BMapLib.DrawingManager(map, {
 87         isOpen: false, //是否开启绘制模式
 88         //enableDrawingTool: true, //是否显示工具栏
 89         drawingToolOptions: {
 90             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
 91             offset: new BMap.Size(5, 5), //偏离值
 92         },
 93         circleOptions: styleOptions, //圆的样式
 94         polylineOptions: styleOptions, //线的样式
 95         polygonOptions: styleOptions, //多边形的样式
 96         rectangleOptions: styleOptions //矩形的样式
 97     });  
 98 
 99      //添加鼠标绘制工具监听事件，用于获取绘制结果
100     drawingManager.addEventListener('overlaycomplete', overlaycomplete);
101 
102     map.addEventListener("rightclick",function(e){
103         if(confirm(e.point.lng + "," + e.point.lat)){
104             $("shape").innerHTML=$("shape").innerHTML+" <br/>("+e.point.lng+","+e.point.lat+")";
105             }
106         });
107     function draw(type){
108         drawingManager.open(); 
109         drawingManager.setDrawingMode(type);
110     }   
111 
112     function clearAll() {
113         for(var i = 0; i < overlays.length; i++){
114             map.removeOverlay(overlays[i]);
115         }
116         overlays.length = 0   
117     }
118     function getPoint(){
119         $("resultShape").innerHTML='';
120         for(var i = 0; i < overlays.length; i++){
121             var overlay=overlays[i].getPath();
122             $("resultShape").innerHTML=$("resultShape").innerHTML+overlay.length+'边形:<br/>';
123             for(var j = 0; j < overlay.length; j++){
124                 var grid =overlay[j];
125                 $("resultShape").innerHTML=$("resultShape").innerHTML+(j+1)+"个点:("+grid.lng+","+grid.lat+");<br/>";
126             }
127         }
128     }
129     function Editing(state){
130         for(var i = 0; i < overlays.length; i++){
131             state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();
132         }
133     }
134 
135     function  showPolygon(btn){
136       var polygon = new BMap.Polygon([
137           new BMap.Point(113.941853,22.530777),
138           new BMap.Point(113.940487,22.527789),
139           new BMap.Point(113.94788,22.527597),
140           new BMap.Point(113.947925,22.530618)
141       ], styleOptions);  //创建多边形
142       map.addOverlay(polygon);   //增加多边形
143       // overlays.push(polygon); //是否把该图像加入到编辑和删除行列
144        btn.setAttribute('disabled','false');
145        showText();
146      }
147 
148      function showText(){
149         var opts = {
150         position : new BMap.Point(113.941853,22.530777),    // 指定文本标注所在的地理位置
151         offset   : new BMap.Size(30, 30)    //设置文本偏移量
152        }
153      var label = new BMap.Label("不可编辑", opts);  // 创建文本标注对象
154         label.setStyle({
155         color : "black",
156          fontSize : "16px",
157         fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
158         });
159       map.addOverlay(label);  
160      }
161 </script>
162 </body>
163 </html>


获取到的四个点的位置信息如上

转载：https://blog.csdn.net/u013239236/article/details/52213977

 

<!DOCTYPE html>
< html>
< head>
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
< meta name= "viewport" content= "initial-scale=1.0, user-scalable=no" />
< style type= "text/css">
body, html{ width: 100 %; height: 100 %; margin: 0; font-family: "微软雅黑";}
#allmap { width: 100 %; height: 500 px; overflow: hidden;}
#result { width: 100 %; font-size: 12 px;}
dl, dt, dd, ul, li{
margin: 0;
padding: 0;
list-style: none;
}
p{ font-size: 12 px;}
dt{
font-size: 14 px;
font-family: "微软雅黑";
font-weight: bold;
border-bottom: 1 px dotted #000;
padding: 5 px 0 5 px 5 px;
margin: 5 px 0;
}
dd{
padding: 5 px 0 0 5 px;
}
li{
line-height: 28 px;
}
</ style>
< script type= "text/javascript" src= "http://api.map.baidu.com/api?v=2.0 & ak=5E5EE28a7615536d1ffe2ce2a3667859"></ 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" />
< title>百度地图API功能演示</ title>
</ head>
< body>
< div id= "allmap" style= "overflow:hidden;zoom:1;position:relative;">
< div id= "map" style= "height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
</ div>
</ div>
< div id= "result">
< input type= "button" value= "获取绘制的覆盖物个数" onclick= "alert(overlays.length)"/>
< input type= "button" value= "清除所有覆盖物" onclick= "clearAll()"/>
< input type= "button" value= "获取多边形的顶点" onclick= "getPoint()"/>< br/>
< input type= "button" value= "开启线、面编辑功能" onclick= "Editing('enable')"/>
< input type= "button" value= "关闭线、面编辑功能" onclick= "Editing('disable')"/>
< input type= "button" value= "显示原有多边形" onclick= "showPolygon(this)" />< br/>

< input type= "button" value= "画多边形" onclick= "draw(BMAP_DRAWING_POLYGON)" />
< input type= "button" value= "画矩形" onclick= "draw(BMAP_DRAWING_RECTANGLE)" />
< input type= "button" value= "画线" onclick= "draw(BMAP_DRAWING_POLYLINE)" />
<!-- <input type="button" value="画点" onclick="draw(BMAP_DRAWING_MARKER)" />-->
< span>右键获取任意点的经纬度</ span>
</ div>
< div id= "resultShape"></ div>
< div id= "shape">坐标为</ div>

< script type= "text/javascript">
function $( id){
return document. getElementById(id);
}

// 百度地图API功能
var map = new BMap. Map( 'map');
var poi = new BMap. Point( 113.948913, 22.530844);
map. centerAndZoom(poi, 16);
map. enableScrollWheelZoom();
var overlays = [];
var overlaycomplete = function( e){
overlays. push(e.overlay);
};
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), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});

//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager. addEventListener( 'overlaycomplete', overlaycomplete);

map. addEventListener( "rightclick", function( e){
if( confirm(e.point.lng + "," + e.point.lat)){
$( "shape").innerHTML = $( "shape").innerHTML + " <br/>(" +e.point.lng + "," +e.point.lat + ")";
}
});
function draw( type){
drawingManager. open();
drawingManager. setDrawingMode(type);
}

function clearAll() {
for( var i = 0; i < overlays.length; i ++){
map. removeOverlay(overlays[i]);
}
overlays.length = 0
}
function getPoint(){
$( "resultShape").innerHTML = '';
for( var i = 0; i < overlays.length; i ++){
var overlay =overlays[i]. getPath();
$( "resultShape").innerHTML = $( "resultShape").innerHTML +overlay.length + '边形:<br/>';
for( var j = 0; j < overlay.length; j ++){
var grid =overlay[j];
$( "resultShape").innerHTML = $( "resultShape").innerHTML +(j + 1) + "个点:(" +grid.lng + "," +grid.lat + ");<br/>";
}
}
}
function Editing( state){
for( var i = 0; i < overlays.length; i ++){
state == 'enable' ?overlays[i]. enableEditing() :overlays[i]. disableEditing();
}
}

function showPolygon( btn){
var polygon = new BMap. Polygon([
new BMap. Point( 113.941853, 22.530777),
new BMap. Point( 113.940487, 22.527789),
new BMap. Point( 113.94788, 22.527597),
new BMap. Point( 113.947925, 22.530618)
], styleOptions); //创建多边形
map. addOverlay(polygon); //增加多边形
// overlays.push(polygon); //是否把该图像加入到编辑和删除行列
btn. setAttribute( 'disabled', 'false');
showText();
}

function showText(){
var opts = {
position : new BMap. Point( 113.941853, 22.530777), // 指定文本标注所在的地理位置
offset : new BMap. Size( 30, 30) //设置文本偏移量
}
var label = new BMap. Label( "不可编辑", opts); // 创建文本标注对象
label. setStyle({
color : "black",
fontSize : "16px",
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
});
map. addOverlay(label);
}
</ script>
</ body>
</ html>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 百度地图笔记_多边形覆盖物区域加标签 百度瓦片绘制地图，实现画圆、矩形以及多边形并获取图形的中心点 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单 vue结合百度地图（vue-baidu-map）绘制多边形 百度地图实现鼠标绘制多边形并获取所有点坐标 Android百度地图之自定义绘制点、线、圆、多边形实现 百度地图判断点是否在多边形内 百度地图 判断marker是否在多边形内 百度地图多边形点击变色 js调用百度地图接口绘制任意多边形并获取每个点的经纬度等
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM