創建可繪畫map：
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 7 <meta name="apple-mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 9 10 <title>修改行程</title> 11 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=egB5ZksTobqA5szp6CLsd6QpTrOU9qkG"></script> 13 <!--加載鼠標繪制工具--> 14 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> 15 <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> 16 <script type="text/javascript"> 17 18 </script> 19 </head> 20 21 <body> 22 <div> 23 <div id="allmap" style="padding-top: 80%;"></div> 24 <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> 25 </div> 26 <div id="result"> 27 <input type="button" value="獲取繪制的覆蓋物個數" onclick="alert(overlays.length)"/> 28 <input type="button" value="獲取繪制的所有點" onclick="getPoint()"/> 29 <input type="button" value="清除所有覆蓋物" onclick="clearAll()"/> 30 </div> 31 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9f43339f3d167d6ee461b722f7f029db"></script> 32 <script> 33 34 // 百度地圖API功能 35 //var map = new BMap.Map('map'); 36 //var poi = new BMap.Point(116.307852,40.057031); 37 //map.centerAndZoom(poi, 16);//設置中心點坐標和地圖級別 38 //map.enableScrollWheelZoom(); //啟用鼠標滾動對地圖放大縮小 39 40 var map = new BMap.Map("allmap"); 41 map.centerAndZoom(new BMap.Point(119.297870,26.067995),16); 42 map.enableScrollWheelZoom(true); 43 44 //鼠標繪制完成回調方法 獲取各個點的經緯度 45 var overlays = []; 46 var overlaycomplete = function(e){ 47 overlays.push(e.overlay); 48 var path = e.overlay.getPath();//Array<Point> 返回多邊型的點數組 49 for(var i=0;i<path.length;i++){ 50 console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat); 51 } 52 }; 53 var styleOptions = { 54 strokeColor:"red", //邊線顏色。 55 fillColor:"red", //填充顏色。當參數為空時，圓形將沒有填充效果。 56 strokeWeight: 3, //邊線的寬度，以像素為單位。 57 strokeOpacity: 0.8, //邊線透明度，取值范圍0 - 1。 58 fillOpacity: 0.6, //填充的透明度，取值范圍0 - 1。 59 strokeStyle: 'solid' //邊線的樣式，solid或dashed。 60 } 61 //實例化鼠標繪制工具 62 var drawingManager = new BMapLib.DrawingManager(map, { 63 isOpen: false, //是否開啟繪制模式 64 enableDrawingTool: true, //是否顯示工具欄 65 drawingMode:BMAP_DRAWING_POLYGON,//繪制模式 多邊形 66 drawingToolOptions: { 67 anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 68 offset: new BMap.Size(5, 5), //偏離值 69 drawingModes:[ 70 BMAP_DRAWING_POLYGON 71 ] 72 }, 73 polygonOptions: styleOptions //多邊形的樣式 74 }); 75 76 //添加鼠標繪制工具監聽事件，用於獲取繪制結果 77 drawingManager.addEventListener('overlaycomplete', overlaycomplete); 78 function clearAll() { 79 for(var i = 0; i < overlays.length; i++){ 80 map.removeOverlay(overlays[i]); 81 } 82 overlays.length = 0; 83 } 84 function getPoint() { 85 debugger; 86 var path = e.overlay.getPath();//Array<Point> 返回多邊型的點數組 87 for(var i=0;i<path.length;i++){ 88 console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat); 89 } 90 } 91 </script> 92 <style> 93 .amap-sug-result { 94 position: fixed; 95 z-index: 1024; 96 background-color: #fefefe; 97 border: 1px solid #d1d1d1; 98 visibility: hidden; 99 } 100 .mui-popup-title+.mui-popup-text { 101 text-align: left; 102 } 103 </style> 104 </body> 105 106 </html>
以上HTML抓取地點后可在瀏覽器調試模式下的控制台獲取節點經緯度坐標，以下是判斷某一點是否在所抓取的區域內（當然，方法中的構建區域要根據自己抓取的目標來更換）：
// 地址自動完成 AMap.plugin('AMap.Autocomplete', function() { var endcomplete = new AMap.Autocomplete({ city: '福州', input: 'end-place', datatype: 'poi' }); AMap.event.addListener(endcomplete, "select", function(data) { select_txt=data.poi.name; if(select_txt.charAt(select_txt.length-1,1) == '鎮'){ mui.alert('無匹配地址，請選擇就近位置', '參數錯誤'); } var pt =new BMap.Point(data.poi.location.lng, data.poi.location.lat); //var isIn = ptInPolygon(pt);
var isIn = ptInPolygon(data.poi.location.lng, data.poi.location.lat); //非5區的重選 if(data.poi.adcode==350102||data.poi.adcode==350111||data.poi.adcode==350103||data.poi.adcode==350104||data.poi.adcode==350105 || isIn){ sfxz=1; via_place_data['end-place'] = { address: data.poi.name, lat: data.poi.location.lat, lng: data.poi.location.lng, adcode:data.poi.adcode }; }else{ mui.alert('當前僅限市內五區及大學城范圍，請重新選擇地址', '參數錯誤'); sfxz = 0; return; } }); });
//下拉框選址采用的是高德地圖的經緯度坐標，通過此方法轉為百度坐標（因為圈定區域時用的是百度地圖，所以判斷是否在多邊形中要用百度坐標判斷） //坐標應該要做轉換，否則下面判斷點是否在區域中是用的百度地圖判斷，如果不轉換會造成偏差 function tobdMap(x, y) { var x_pi = 3.14159265358979324 * 3000.0 / 180.0; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); var bd_lon = z * Math.cos(theta) + 0.0065; var bd_lat = z * Math.sin(theta) + 0.006; var pt =new BMap.Point(bd_lon, bd_lat); return pt; }
function ptInPolygon(x, y){ var pts = []; var pt1 = new BMap.Point(119.214795, 26.019238); var pt2 = new BMap.Point(119.230749, 26.024693); var pt3 = new BMap.Point(119.210914, 26.078185); var pt4 = new BMap.Point(119.196829, 26.086622); var pt5 = new BMap.Point(119.182456, 26.080911); var pt6 = new BMap.Point(119.180587, 26.065464); var pt7 = new BMap.Point(119.198266, 26.035861); pts.push(pt1); pts.push(pt2); pts.push(pt3); pts.push(pt4); pts.push(pt5); pts.push(pt6); pts.push(pt7); var ply = new BMap.Polygon(pts); //var pt =new BMap.Point(116.400, 39.914); var pt = tobdMap(x, y); var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply); if(result == true){ return true; //alert("點在多邊形內"); } else { return false; //alert("點在多邊形外") } }
以上是利用高德地圖來實現一個下拉框的地址選擇來獲取地址，使用前要導入js：<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key="></script> 將key的值填入自己申請得到的就可以了