纯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>
View Code
标签：lon,length,lat,圆形,Math,var,new,矩形,百度 From： https://www.cnblogs.com/Ifyou/p/17292563.html