（转） 百度地图

转：http://blog.csdn.net/liusaint1992/article/details/50070839

百度地图API一：百度地图上循环显示标注点。使用闭包循环加载点击事件

本文记录：百度地图上循环显示标注点marker。使用立即执行函数和闭包循环加载点击事件显示信息窗口显示该标注点的更多信息。

1.准备数据。点的信息。

[javascript]  view plain  copy

1. var points = [  
2. {"lng":116,"lat":40,"url":"http://www.baidu.com","id":50,"name":"p1"},  
3. {"lng":117,"lat":31,"url":"http://www.taobao.com","id":2,"name":"p2"},  
4. {"lng":116,"lat":34,"url":"http://www.google.com","id":3,"name":"p3"}  
5. ]  

2.加载地图。中心点和显示级别默认中国。

[javascript]  view plain  copy

1. var map = new BMap.Map("container");   
2. map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);//设置中心点和显示级别。中国。  
3. map.enableScrollWheelZoom();//滚轮放大缩小。  

3.循环显示标注点marker。使用立即执行函数和闭包循环加载点击事件显示信息窗口显示该标注点的更多信息。

[javascript]  view plain  copy

1. function addMarker(points){  // 创建图标对象     
2.   
3.     // 创建标注对象并添加到地图     
4.     for(var i = 0,pointsLen = points.length;i <pointsLen;i++){  
5.         var point = new BMap.Point(points[i].lng,points[i].lat);      
6.         var  marker = new BMap.Marker(point);     
7.         map.addOverlay(marker);   
8.         //给标注点添加点击事件。使用立即执行函数和闭包  
9.         (function() {  
10.             var thePoint = points[i];  
11.             marker.addEventListener("click",function(){  
12.                 showInfo(this,thePoint);  
13.             });  
14.         })();  
15.   
16.     }  
17.   
18. }    

4.点击显示标注点markers的信息窗口。

[javascript]  view plain  copy

1. //显示信息窗口，显示标注点的信息。  
2. function showInfo(thisMaker,point){  
3.     var sContent =  
4.     '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
5.     +'<li style="line-height: 26px;font-size: 15px;">'  
6.     +'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'  
7.     +'<li style="line-height: 26px;font-size: 15px;">'  
8.     +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'  
9.     +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'  
10.     +'</ul>';  
11.     var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象  
12.     thisMaker.openInfoWindow(infoWindow);   //图片加载完毕重绘infowindow  
13.    }  

效果图：

第一篇结束。下一篇讲根据标注点的坐标范围载入地图时自适应地图显示级别和中心点。

百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

本文记录 如何通过标注点markers的坐标范围来计算百度地图的显示级别zoom。

1. var points = [point1, point2,point3];  
2. var view = map.getViewport(eval(points));  
3. var mapZoom = view.zoom;   
4. var centerPoint = view.center;   
5. map.centerAndZoom(centerPoint,mapZoom);  

 

百度地图API三：实时轨迹动态展现

代码：

[javascript]  view plain  copy

1. //数据准备,  
2. var points = [];//原始点信息数组  
3. var bPoints = [];//百度化坐标数组。用于更新显示范围。  
4.   
5. //地图操作开始  
6. var map = new BMap.Map("container");    
7.   
8. map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5); //初始显示中国。  
9.   
10. map.enableScrollWheelZoom();//滚轮放大缩小  
11.   
12. setTimeout(dynamicLine, 1000);//动态生成新的点。  

addLine()代码：

[javascript]  view plain  copy

1. //添加线  
2. function addLine(points){  
3.   
4.     var linePoints = [],pointsLen = points.length,i,polyline;  
5.     if(pointsLen == 0){  
6.         return;  
7.     }  
8.     // 创建标注对象并添加到地图     
9.     for(i = 0;i <pointsLen;i++){  
10.         linePoints.push(new BMap.Point(points[i].lng,points[i].lat));  
11.     }  
12.   
13.     polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线  
14.     map.addOverlay(polyline);   //增加折线  
15. }  

随机生成新的轨迹点，动态添加到百度地图上。dynamicLine()    实际情况下这个函数应该是传参数。points。 这个points是一个数组。传参就可以直接添加新的轨迹到地图上。  绘制新的点并调节地图显示。

[javascript]  view plain  copy

1. //随机生成新的点，加入到轨迹中。  
2. function dynamicLine(){  
3.     var lng = 100+getRandom(40);  
4.     var lat = 35+getRandom(30);  
5.     var id = getRandom(1000);  
6.     var point = {"lng":lng,"lat":lat,"status":1,"id":id}  
7.     var makerPoints = [];  
8.     var newLinePoints = [];  
9.     var len;  
10.   
11.     makerPoints.push(point);              
12.     addMarker(makerPoints);//增加对应该的轨迹点  
13.     points.push(point);  
14.     bPoints.push(new BMap.Point(lng,lat));  
15.     len = points.length;  
16.     newLinePoints = points.slice(len-2, len);//最后两个点用来画线。  
17.   
18.     addLine(newLinePoints);//增加轨迹线  
19.     setZoom(bPoints);  
20.     setTimeout(dynamicLine, 1000);  
21. }  

获取随机数：

[javascript]  view plain  copy

1. // 获取随机数  
2. function getRandom(n){  
3.     return Math.floor(Math.random()*n+1)  
4. }  

移动地图中心点和显示级别：

[javascript]  view plain  copy

1. //根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别  
2. function setZoom(bPoints){  
3.     var view = map.getViewport(eval(bPoints));  
4.     var mapZoom = view.zoom;   
5.     var centerPoint = view.center;   
6.     map.centerAndZoom(centerPoint,mapZoom);  
7. }  

初始效果图：

过几秒之后的效果图：

百度地图API四：实现轨迹动态回放功能

track_map = new BMap.Map("container");
                window.map = track_map;

                /*track_map.enableScrollWheelZoom();*/
                /*track_map.centerAndZoom(points[0], 15);*/


                /*map.addControl(new BMap.NavigationControl());
                 map.addControl(new BMap.ScaleControl());
                 map.addControl(new BMap.OverviewMapControl({isOpen: true}));*/
                //通过DrivingRoute获取一条路线的point
                var driving = new BMap.DrivingRoute(track_map);
                driving.search(points[0], points[points.length - 1]);
                driving.setSearchCompleteCallback(function () {
                    //得到路线上的所有point
                    /*points = driving.getResults().getPlan(0).getRoute(0).getPath();*/
                    //画面移动到起点和终点的中间
                    /*centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);*/
                    /*track_map.panTo(points[0]);*/
                    //连接所有点
                    track_map.addOverlay(new BMap.Polyline(points, {
                        strokeColor: "#07f324",
                        strokeWeight: 3,
                        strokeOpacity: 1
                    }));

                    //显示小车子
                    /*label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
                    label.setContent("经度: " + points[0].lng + "<br>纬度: " + points[0].lat);*/
                    car = new BMap.Marker(points[0]);
                    /*car.setLabel(label);*/
                    track_map.addOverlay(car);

                    //显示起点终点
                    var icon = new BMap.Icon("/resources/images/startIcon.png", new BMap.Size(45, 45), {anchor: new BMap.Size(25, 45)});

                    var marker = new BMap.Marker(points[0], {icon: icon});  // 创建标注

                    track_map.addOverlay(marker);

                    var icon = new BMap.Icon("/resources/images/endIcon.png", new BMap.Size(45, 45), {anchor: new BMap.Size(25, 45)});

                    var marker = new BMap.Marker(points[points.length - 1], {icon: icon});  // 创建标注

                    track_map.addOverlay(marker);

                    //点亮操作按钮
                    playBtn.attr("disabled", false);
                    resetBtn.attr("disabled", false);

                    var view = track_map.getViewport(eval(points));
                    var mapZoom = view.zoom;
                    var centerPoint = view.center;
                    track_map.centerAndZoom(centerPoint,mapZoom);

function play() {
            playBtn.attr("disabled", true);
            pauseBtn.attr("disabled", false);
            var point = points[index];
            if (index > 0) {
                track_map.addOverlay(new BMap.Polyline([points[index - 1], point], {
                    strokeColor: "red",
                    strokeWeight: 1,
                    strokeOpacity: 1
                }));
            }
            /*label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);*/
            car.setPosition(point);
            index++;

            if (followChk.prop('checked')) {
                track_map.panTo(point);
            }
            if (index < points.length) {
                timer = window.setTimeout("play(" + index + ")", 1000);
            } else {
                playBtn.attr("disabled", true);
                pauseBtn.attr("disabled", true);
                track_map.panTo(point);
            }
        }
        function pause() {
            playBtn.attr("disabled", false);
            pauseBtn.attr("disabled", true);
            if (timer) {
                window.clearTimeout(timer);
            }
        }
        function reset() {
            followChk.attr("checked", false);
            playBtn.attr("disabled", false);
            pauseBtn.attr("disabled", true);
            if (timer) {
                window.clearTimeout(timer);
            }
            index = 0;
            car.setPosition(points[0]);
            /*label.setContent("经度: " + points[0].lng + "<br>纬度: " + points[0].lat);*/
            /*track_map.panTo(points[0]);*/
            var view = track_map.getViewport(eval(points));
            var mapZoom = view.zoom;
            var centerPoint = view.center;
            track_map.centerAndZoom(centerPoint,mapZoom);
        }

百度地图API五：百度地图坐标转换

/**
     * 高德转百度
     * @param gd_lon
     * @param gd_lat
     * @return
     */
    public static double[] gaoDeToBaidu(double gd_lon, double gd_lat) {
        double[] bd_lat_lon = new double[2];
        double PI = 3.14159265358979324 * 3000.0 / 180.0;
        double x = gd_lon, y = gd_lat;
        double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * PI);
        double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * PI);
        bd_lat_lon[0] = z * Math.cos(theta) + 0.0065;
        bd_lat_lon[1] = z * Math.sin(theta) + 0.006;
        return bd_lat_lon;
    }

    /**
     * 百度转高德
     * @param bd_lat
     * @param bd_lon
     * @return
     */
    public static double[] bdToGaoDe(double bd_lat, double bd_lon) {
        double[] gd_lat_lon = new double[2];
        double PI = 3.14159265358979324 * 3000.0 / 180.0;
        double x = bd_lon - 0.0065, y = bd_lat - 0.006;
        double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * PI);
        double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * PI);
        gd_lat_lon[0] = z * Math.cos(theta);
        gd_lat_lon[1] = z * Math.sin(theta);
        return gd_lat_lon;
    }