高德地图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>

贴图一张：这里写图片描述