从业多年来,一直都是在计算kpi,最近由于项目需要需要在地图上打点。很好玩,希望可以深入下去;
1 GPS坐标和百度坐标转换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
static double pi = 3.14159265358979324; static double a = 6378245.0; static double ee = 0.00669342162296594323; public final static double x_pi = 3.14159265358979324 * 3000.0 / 180.0; public static double[] wgs2bd(double lat, double lon) { double[] wgs2gcj = wgs2gcj(lat, lon); double[] gcj2bd = gcj2bd(wgs2gcj[0], wgs2gcj[1]); return gcj2bd; } public static double[] gcj2bd(double lat, double lon) { double x = lon, y = lat; double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); double bd_lon = z * Math.cos(theta) + 0.0065; double bd_lat = z * Math.sin(theta) + 0.006; return new double[] { bd_lat, bd_lon }; } public static double[] bd2gcj(double lat, double lon) { double x = lon - 0.0065, y = lat - 0.006; double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); double gg_lon = z * Math.cos(theta); double gg_lat = z * Math.sin(theta); return new double[] { gg_lat, gg_lon }; } public static double[] wgs2gcj(double lat, double lon) { double dLat = transformLat(lon - 105.0, lat - 35.0); double dLon = transformLon(lon - 105.0, lat - 35.0); double radLat = lat / 180.0 * pi; double magic = Math.sin(radLat); magic = 1 - ee * magic * magic; double sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi); dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); double mgLat = lat + dLat; double mgLon = lon + dLon; double[] loc = { mgLat, mgLon }; return loc; } private static double transformLat(double lat, double lon) { double ret = -100.0 + 2.0 * lat + 3.0 * lon + 0.2 * lon * lon + 0.1 * lat * lon + 0.2 * Math.sqrt(Math.abs(lat)); ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lon * pi) + 40.0 * Math.sin(lon / 3.0 * pi)) * 2.0 / 3.0; ret += (160.0 * Math.sin(lon / 12.0 * pi) + 320 * Math.sin(lon * pi / 30.0)) * 2.0 / 3.0; return ret; } private static double transformLon(double lat, double lon) { double ret = 300.0 + lat + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 * Math.sqrt(Math.abs(lat)); ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0; ret += (150.0 * Math.sin(lat / 12.0 * pi) + 300.0 * Math.sin(lat / 30.0 * pi)) * 2.0 / 3.0; return ret; }
2 百度map API 接口学习
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #l-map{height:100%;78%;float:left;border-right:2px solid #bcbcbc;} #r-result{height:100%;20%;float:left;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加多个标注点</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 编写自定义函数,创建标注 function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); } // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 25; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point); } </script>
3 实现过程
工程文件结构目录 ---js ---css ---img index.html
要打点的数据放入js文件夹中的data.js文件中
css存放一些样式模版
img存放一些标注的图例
index.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LQzxqhwaGvdrWbKI4BGmwIEy"></script> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/data.js"></script> <link rel="stylesheet" href="css/ui-dialog.css"> <script type="text/javascript" src="js/dialog.js"></script> <title>HZ_ATM</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> function drawBoundary(name) { var bdary = new BMap.Boundary(); bdary.get(name, function(rs){ var count = rs.boundaries.length; for(var i = 0; i < count; i++){ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, strokeColor: "#ff0000", fillColor: ""}); map.addOverlay(ply); if (i == 0) { // x1,y1;x2,y2; var tmp = rs.boundaries[i].split(";"); var pa = []; for (var j = 0; j < tmp.length; j++) { var tmp1 = tmp[j].split(","); if (tmp1.length == 2) { pa.push(new BMap.Point(tmp1[0], tmp1[1])); } } console.log(pa); map.setViewport(pa); } } }); } function drawAreaBoundary() { var d = dialog({ title: '请输入行政区名(如"北京")', content: '<div style="margin:5px" ><input autofocus id="input_area_name"/></div>', okValue: '确定', ok: function () { var name = $('#input_area_name').val(); if (name == "") { return false; } drawBoundary(name); this.remove(); }, cancelValue: '取消', cancel: function () {} }); d.showModal(); } // 百度地图API功能 var menu = new BMap.ContextMenu(); menu.addItem(new BMap.MenuItem('绘制行政区边界', drawAreaBoundary, 100)); var map = new BMap.Map("allmap"); var point = new BMap.Point(120.149287,30.256395); map.centerAndZoom(point, 9); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); // 启用滚轮放大缩小 map.enableKeyboard(); // 启用键盘操作 map.addContextMenu(menu); var myIcon = new BMap.Icon("img/atm.png", new BMap.Size(20, 30), { offset: new BMap.Size(0, 0), // 指定定位位置 imageOffset: new BMap.Size(0, 0) // 设置图片偏移 }); $.each(a,function(n,value){ var marker2 = new BMap.Marker(new BMap.Point(value.ln,value.la),{icon:myIcon}); // 创建 map.addOverlay(marker2); marker2.addEventListener("click",getAttr2); function getAttr2(){ var p = marker2.getPosition(); //获取marker的位置 alert("已有ATM的百度坐标:" + p.lng + "," + p.lat); } }) $.each(b,function(n,value){ var marker1 = new BMap.Marker(new BMap.Point(value.ln,value.la)); // 创建 map.addOverlay(marker1); marker1.addEventListener("click",getAttr1); function getAttr1(){ var p = marker1.getPosition(); //获取marker的位置 alert("备选ATM的百度坐标:" + p.lng + "," + p.lat); } }) </script>
4 后记
1 需要学习js语法知识
2 善用官方demo
参考资料
1 百度地图JavaScript API http://lbsyun.baidu.com/index.php?title=jspopular
2 https://files-cdn.cnblogs.com/files/hdu-2010/%E6%B5%B7%E9%87%8F%E7%82%B9-demo.zip