使用百度地图实现圆形，矩形自动生成路线点
纯JS代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=rT0CjX0WLsG2DA4PCQxXlPw5QZKZmDYZ"> </script> <title>地图示例</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #container { height: 100% } #allmap { width: 100%; height: 700px; overflow: hidden; } </style> </head> <body> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="container" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"> </div> </div> <div style="width: 100% ;height: 100px;margin-top: 30px;"> 请输入经度：<input id="longitude" value="" /> 请输入纬度：<input id="latitude" value="" /> <button onclick="save()">确定</button> </div> <script type="text/javascript"> </script> <script type="text/javascript"> function save() { var newLon = document.getElementById("longitude").value; var newLat = document.getElementById("latitude").value; this.lon = newLon; this.lat = newLat; this.loadData(lon, lat); } var lon = "104.07629897213479" var lat = "30.55206000338563" var mapNumberUtil; this.loadData(lon, lat); function loadData(lon, lat) { mapNumberUtil = { rad: function rad(d) { return d * Math.PI / 180.0; }, deg: function deg(d) { return d * 180 / Math.PI } }; var map = new BMap.Map("container"); // 创建地图实例 var point1 = new BMap.Point(lon, lat); // 创建点坐标 112.45035065711788 map.centerAndZoom(point1, 14); //初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); map.addEventListener("click", function(e) { //map.clearOverlays(); var point2 = new BMap.Point(e.point.lng, e.point.lat); var marker1 = new BMap.Marker(point2); map.addOverlay(marker1); function startDownload(oContent, sSaveFileName, fBgnDownHandle, sTxtMimeExtName, bAddUtf8BOM, bForceUseBlob, bNotShowNewNode, oHtmlDoc) { if (arguments.length < 8) oHtmlDoc = document; if (arguments.length < 7) bNotShowNewNode = true; if (arguments.length < 6) bForceUseBlob = true; if (arguments.length < 5) bAddUtf8BOM = true; if (arguments.length < 4) sTxtMimeExtName = "txt"; if (arguments.length < 3) fBgnDownHandle = null; var sHref = ""; var sBOM = bAddUtf8BOM ? "\ufeff" : ""; var sTxtMime = "text/" + sTxtMimeExtName; if (typeof oContent == "object" && oContent instanceof Blob) { sHref = URL.createObjectURL(oContent); } else if (typeof oContent == "string" && oContent.match(/^(http|https|ftp):\/\//i)) { sHref = oContent; } else if (bForceUseBlob) { var oBlob = new Blob([sBOM + oContent], { type: sTxtMime + ",charset=UTF-8" }); sHref = URL.createObjectURL(oBlob); } else { sHref = "data:" + sTxtMime + ';charset=utf-8,' + sBOM + encodeURIComponent(oContent); } var aLink = oHtmlDoc.createElement('a'); aLink.href = sHref; aLink.download = "" + sSaveFileName; if (bNotShowNewNode) { aLink.style = "display: none;"; } //经纬度下载方法，需要下载放开注释 //fireClickEvent(aLink); if (fBgnDownHandle) fBgnDownHandle(); } function fireClickEvent(oElem) { var oEvent; if (window.MouseEvent) { oEvent = new MouseEvent('click'); } else { oEvent = document.createEvent('MouseEvents'); oEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } oElem.dispatchEvent(oEvent); } var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: false }, onSearchComplete: function(results) { if (driving.getStatus() == BMAP_STATUS_SUCCESS) { var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); var sl = pts.length; var result = []; for (var i in pts) { result.push(pts[i].lng + "," + pts[i].lat + ","); var point = new BMap.Point(pts[i].lng, pts[i].lat); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 } console.log("point:" + "(" + sl + ")" + result.join('')); startDownload("point:" + "(" + sl + ")" + result.join(''), "lnglat.txt"); } } }); driving.search(point2, point1); }) var arr = [5, 20, 35, 50, 65, 80, 95, 110, 125, 140, 155, 170, 185, 200, 215, 230, 245, 260, 275, 290, 305, 320, 335, 350, 360, 375 ]; var temp_arr = arr.slice(0); // 取出的数值项，保存在此数组 var return_arr = []; var dist = 2500; var squareDist = 5000; for (var i = 0; i < 5; i++) { // 判断如果数组还有可以取出的元素，以防下标越界 if (temp_arr.length > 0) { // 在数组中产生一个随机索引 var arrIndex = Math.floor(Math.random() * temp_arr.length); // 将此随机索引的对应数组元素值复制出来 return_arr[i] = temp_arr[arrIndex]; // 然后删掉此索引的数组元素，这时候temp_arr变为新的数组 temp_arr.splice(arrIndex, 1) } else { // 数组中数据项取完后，退出循环， break; } } //随机生成圆形的点经纬度 for (var i = 0; i < return_arr.length; i++) { var lonandlat = getLonAndLat(lon, lat, return_arr[i], dist); autoMap(lonandlat.lon, lonandlat.lat); } async function autoMap(lonLone, latLone) { var point2 = new BMap.Point(lonLone, latLone); var marker1 = new BMap.Marker(point2); map.addOverlay(marker1); function startDownload(oContent, sSaveFileName, fBgnDownHandle, sTxtMimeExtName, bAddUtf8BOM, bForceUseBlob, bNotShowNewNode, oHtmlDoc) { if (arguments.length < 8) oHtmlDoc = document; if (arguments.length < 7) bNotShowNewNode = true; if (arguments.length < 6) bForceUseBlob = true; if (arguments.length < 5) bAddUtf8BOM = true; if (arguments.length < 4) sTxtMimeExtName = "txt"; if (arguments.length < 3) fBgnDownHandle = null; var sHref = ""; var sBOM = bAddUtf8BOM ? "\ufeff" : ""; var sTxtMime = "text/" + sTxtMimeExtName; if (typeof oContent == "object" && oContent instanceof Blob) { sHref = URL.createObjectURL(oContent); } else if (typeof oContent == "string" && oContent.match(/^(http|https|ftp):\/\//i)) { sHref = oContent; } else if (bForceUseBlob) { var oBlob = new Blob([sBOM + oContent], { type: sTxtMime + ",charset=UTF-8" }); sHref = URL.createObjectURL(oBlob); } else { sHref = "data:" + sTxtMime + ';charset=utf-8,' + sBOM + encodeURIComponent(oContent); } var aLink = oHtmlDoc.createElement('a'); aLink.href = sHref; aLink.download = "" + sSaveFileName; if (bNotShowNewNode) { aLink.style = "display: none;"; } //fireClickEvent(aLink); if (fBgnDownHandle) fBgnDownHandle(); } function fireClickEvent(oElem) { var oEvent; if (window.MouseEvent) { oEvent = new MouseEvent('click'); } else { oEvent = document.createEvent('MouseEvents'); oEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } oElem.dispatchEvent(oEvent); } var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: false }, onSearchComplete: function(results) { if (driving.getStatus() == BMAP_STATUS_SUCCESS) { var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); var sl = pts.length; var result = []; for (var i in pts) { result.push(pts[i].lng + "," + pts[i].lat + ","); var point = new BMap.Point(pts[i].lng, pts[i].lat); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 } console.log("point:" + "(" + sl + ")" + result.join('')); startDownload("point:" + "(" + sl + ")" + result.join(''), "lnglat.txt"); } } }); driving.search(point2, point1); } var newlonandlat1 = getLonAndLat(lon, lat, 45, 5000); var newlonandlat2 = getLonAndLat(lon, lat, 135, 5000); var newlonandlat3 = getLonAndLat(lon, lat, 225, 5000); var newlonandlat4 = getLonAndLat(lon, lat, 315, 5000); var arr = [5, 20, 35, 50, 65, 80, 95, 110, 125, 140, 155, 170, 185, 200, 215, 230, 245, 260, 275, 290, 305, 320, 335, 350, 360, 375 ]; var str = newlonandlat2.lon + "," + newlonandlat2.lat + ";" + newlonandlat2.lon + "," + newlonandlat2.lat + ";" + newlonandlat1.lon + "," + newlonandlat1.lat + ";" + newlonandlat1.lon + "," + newlonandlat1.lat + ";" + newlonandlat4.lon + "," + newlonandlat4.lat + ";" + newlonandlat4.lon + "," + newlonandlat4.lat + ";" + newlonandlat3.lon + "," + newlonandlat3.lat + ";" + newlonandlat3.lon + "," + newlonandlat3.lat console.log("顶顶顶顶顶顶顶顶顶顶") console.log(str) var pointArray = []; var ply = new BMap.Polygon( str, { strokeWeight: 2, strokeColor: "blue" }); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); map.setViewport(pointArray); //调整视野 var oneLon = newlonandlat2.lon; var oneLat = newlonandlat2.lat; var twoLon = newlonandlat3.lon; var twoLat = newlonandlat3.lat; //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度； var distance = 10; console.log("dd打") var lonAndlats = []; for (var i = 1; i <= 5; i++) { lonAndlats.push(getLonAndLat(newlonandlat1.lon, newlonandlat1.lat, 270, i + "000")) lonAndlats.push(getLonAndLat(newlonandlat2.lon, newlonandlat2.lat, 360, i + "000")) lonAndlats.push(getLonAndLat(newlonandlat3.lon, newlonandlat3.lat, 90, i + "000")) lonAndlats.push(getLonAndLat(newlonandlat4.lon, newlonandlat4.lat, 180, i + "000")) } var new_arr = []; for (var i = 0; i < 5; i++) { // 判断如果数组还有可以取出的元素，以防下标越界 if (lonAndlats.length > 0) { // 在数组中产生一个随机索引 var arrIndex = Math.floor(Math.random() * lonAndlats.length); // 将此随机索引的对应数组元素值复制出来 new_arr[i] = lonAndlats[arrIndex]; // 然后删掉此索引的数组元素，这时候lonAndlats变为新的数组 lonAndlats.splice(arrIndex, 1) } else { // 数组中数据项取完后，退出循环， break; } } for (var i = 0; i < new_arr.length; i++) { autoMap(new_arr[i].lon, new_arr[i].lat); } var circle = new BMap.Circle(new BMap.Point(lon, lat), 2500, { strokeColor: 'blue', //颜色 strokeWeight: 2, //宽度 strokeOpacity: 0.5 //透明度 }); map.addOverlay(circle); } function getLonAndLat(lon, lat, brng, dist) { //大地坐标系资料WGS-84 极坐标长半径a=6378137 极坐标短半径b=6356752.3142 扁率f=1/298.2572236 var a = 6378137; var b = 6356752.3142; var f = 1 / 298.257223563; var lon1 = lon * 1; var lat1 = lat * 1; var s = dist; var alpha1 = mapNumberUtil.rad(brng); var sinAlpha1 = Math.sin(alpha1); var cosAlpha1 = Math.cos(alpha1); var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1)); var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1; var sigma1 = Math.atan2(tanU1, cosAlpha1); var sinAlpha = cosU1 * sinAlpha1; var cosSqAlpha = 1 - sinAlpha * sinAlpha; var uSq = cosSqAlpha * (a * a - b * b) / (b * b); var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq))); var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq))); var sigma = s / (b * A), sigmaP = 2 * Math.PI; while (Math.abs(sigma - sigmaP) > 1e-12) { var cos2SigmaM = Math.cos(2 * sigma1 + sigma); var sinSigma = Math.sin(sigma); var cosSigma = Math.cos(sigma); var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) - B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM))); sigmaP = sigma; sigma = s / (b * A) + deltaSigma; } var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1; var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)); var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1); var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha)); var L = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM))); var revAz = Math.atan2(sinAlpha, -tmp); // final bearing var lonLatObj = { lon: lon1 + mapNumberUtil.deg(L), lat: mapNumberUtil.deg(lat2) } return lonLatObj; } </script> </body> </html>
