百度地图标注多个点
从业多年来，一直都是在计算kpi，最近由于项目需要需要在地图上打点。很好玩，希望可以深入下去；
1 GPS坐标和百度坐标转换
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 接口学习
<!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 {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width: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
<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 {width: 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
