成人乱码一区二区三区四区,国产超高清麻豆精品传媒麻豆精品 ,精品中文字幕人妻一二

:: :: :: ::
::
公告
直接上代碼

 <!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
posted on 2021-03-16 17:34 我愛張苗苗閱讀(1638) 評論(0) 收藏舉報
刷新頁面返回頂部