高德地圖JS API —— 多邊形搜索

2019-11-10 20:08:24

字體：大中小

來源：轉載

供稿：網友

畢業設計用到了高德地圖JS API，多邊形搜索部分花了一個下午才完成（javascript現學先用啊），記錄一下。實現功能：鼠標左擊可以在地圖中獲得點的經緯度位置，點的位置信息會顯示在左下角的浮板上。輸入關鍵字配置搜索的對象。點擊多邊形搜索后用戶選擇的點成為繪制多邊形的頂點，在多邊形的范圍內會搜索包含關鍵詞的對象，結果顯示在右上角的浮板上。點擊“清除現有多邊形”按鈕可以將結果集清空，并移除地圖上現有的多邊形。這里主要應用到了“鼠標點擊地圖獲得點的位置”（AMap.event.addListener(map,'click',function(e){})），“位置搜索”(AMap.PlaceSearch)的高德地圖接口。感謝高德，提供了方便的API，使得不會前端的我也實現這樣棒的功能。下面代碼中的”您申請的key值“是自己注冊成為高德開發者后擁有的自己的key。我就不寫了。

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>polygon_search</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.CSS"/> <script src="http://cache.amap.com/lbs/static/es5.min.js"></script> <script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script> <script type="text/Javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> <style type="text/css"> .panel { color: #333; padding: 6px; border: 1px solid silver; box-shadow: 3px 4px 3px 0px silver; position: absolute; background-color: #eee; bottom: 10px; left: 10px; border-radius: 5px; overflow: hidden; line-height: 20px; } #result { margin: 0; padding: 0; z-index: 999; position: absolute; background-color: white; max-height: 100%; overflow-y: auto; top: 0; right: 0; width: 280px; } </style></head><body><div id="container"></div><div class ='panel'>上一次點標記位置: &nbsp&nbsp x&nbsp<input type="text" id = 'inputx' value=""></input> y&nbsp<input type="text" id = 'inputy' value=""></input><br> 搜索關鍵字:&nbsp&nbsp<input type="text" id = 'inputKey' value=""></input> <button type="button" id="sureButton" onclick="polygonDraw()">多邊形搜索</button> <button type="button" id="clearButton" onclick="myClear()">清除現有多邊形</button> </div><div id="result"></div><script language="javascript"> var map = new AMap.Map("container",{ rotateEnable:true, dragEnable:true, zoomEnable:true, resizeEnable: true }); var placeSearch; var marker; var markerArray = new Array(); //the array regards as stack, stores markers var clickEventListener; var points; //store [[x1,y1],[x2,y2],...] var polygon; var keyWords; map.plugin(["AMap.ToolBar"],function(){ toolBar = new AMap.ToolBar(); map.addControl(toolBar); }); AMap.service(["AMap.PlaceSearch"], function() { placeSearch = new AMap.PlaceSearch({ //build placeSearch pageSize: 5, pageIndex: 1, city: "010", map: map, panel: "result" }); }); // click event get point (Lng,Lat) position clickEventListener = AMap.event.addListener(map,'click',function(e){ document.getElementById("inputx").value = e.lnglat.getLng(); document.getElementById("inputy").value = e.lnglat.getLat(); map.setCenter( new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())); marker = new AMap.Marker({ position:new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()) }); markerArray.push(marker); marker.setMap(map); }); // to draw polygon function polygonDraw(){ if(markerArray.length < 3) { // can not draw polygon alert("the number of points is less than 3."); return; } var i,j; points = new Array(); keyWords = document.getElementById("inputKey").value; if(keyWords == ""){ alert("請輸入搜索關鍵字"); return ; } for(i=0;i<markerArray.length;i++){ points[i] = new Array(); points[i][0] = markerArray[i].getPosition().getLng(); points[i][1] = markerArray[i].getPosition().getLat(); markerArray[i].setMap(null); // clear all points we just clicked. } polygon = new AMap.Polygon({ //path: polygonArr,//設置多邊形邊界路徑 path:points, strokeColor: "#FF33FF", //線顏色 strokeOpacity: 0.2, //線透明度 strokeWeight: 3, //線寬 fillColor: "#1791fc", //填充色 fillOpacity: 0.35//填充透明度 }); placeSearch.searchInBounds(keyWords, polygon,function(status, result){ //alert(status + " "+ result); }); } function myClear(){ points.length = 0; placeSearch.clear(); document.getElementById('result').innerHTML = ""; markerArray.splice(0,markerArray.length); document.getElementById("inputKey").value = ""; }</script></BODY></HTML>

貼圖一張：這里寫圖片描述