碼上歡樂
相關內容    簡體    繁體

百度地圖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