百度地图JavaScript API V1.5初级开发工具类

/**
 * 百度地图使用工具类-v1.5
 * @author  boonya
 * @date    2013-7-7
 * @address Chengdu,Sichuan,China
 * @email   boonya@sina.com
 * @company KWT.Shenzhen.Inc.com
 * @notice  有些功能需要加入外部JS库才能使用，另外还需要申请地图JS key .
 *          申请地址：http://developer.baidu.com/map/apply-key.htm
 */
(function(){
    
    var map={};
    window.BmapUtils;
    /**
     * 百度地图基础操作
     */
    BmapUtils={
        /**
         * 全局变量
         */
        CONSTANT:{
                CONTAINER:"map",
                DEFAULT_ZOOM:12
        },
        /**
         * 获取地图视图范围坐标
         * @returns  {object} 范围对象
         */
        getBounds:function(){
            if(map){
                var bs = map.getBounds();                                               // 获取可视区域
                var bssw = bs.getSouthWest();                                           // 可视区域左下角
                var bsne = bs.getNorthEast();                                           // 可视区域右上角
                return {leftBottom:bssw,rightTop:bsne};
            }
            return null;
        },
        /**
         * 设置车辆图标
         * @param carImgUrl     车辆图片路径
         * @returns {BMap.Icon} 百度Icon图标对象
         */
        getIcon:function(carImgUrl){
            var myIcon = new BMap.Icon(carImgUrl, new BMap.Size(32, 20), {              //小车图片
                //offset: new BMap.Size(0, -5),                                         //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0)                                        //图片的偏移量。为了是图片底部中心对准坐标点。
              });
            return myIcon;
        },
        /**
         * 初始化普通地图
         * @param lon  {number}      经度
         * @param lat  {number}      纬度
         * @param zoom {number}      缩放等级
         */
        initCommonMap:function(lon,lat,zoom){
            map = new BMap.Map(this.CONSTANT.CONTAINER);
            var point = new BMap.Point(lon||116.331398,lat||39.897445);                 // 默认地图初始化位置为北京
            map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_ZOOM);
        },
        /**
         * 初始化3D地图
         * @param lon  {number}      经度
         * @param lat  {number}      纬度
         * @param cityname {string}  城市名称
         * @param zoom     {number}  缩放等级
         */
        my3Dmap:function(lon,lat,cityname,zoom){
            map = new BMap.Map(this.CONSTANT.CONTAINER, {mapType:BMAP_PERSPECTIVE_MAP});
            var point = new BMap.Point(lon||116.4035,lat||39.915);
            map.setCurrentCity(cityname||"北京");                                       // 设置地图显示的城市 此项是必须设置的
            map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_ZOOM);
            map.enableScrollWheelZoom(true);
        },
        /**
         * 初始化卫星地图
         * @param lon  {number}      经度
         * @param lat  {number}      纬度
         * @param zoom {number}      缩放等级
         */
        satelliteMap:function(lon,lat,zoom){
            map = new BMap.Map(this.CONSTANT.CONTAINER,{mapType: BMAP_HYBRID_MAP});      //设置卫星图为底图
            var point = new BMap.Point(lon||116.4035,lat||39.915);
            map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_ZOOM);
            map.enableScrollWheelZoom(true);
        },
        /**
         * IP定位城市
         */
        ipLocateCity:function(){
            var myFun=function (result){
                var cityName = result.name;
                map.setCenter(cityName);
            };
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
        },
        /**
         * 平移地图
         * @param lon {number} 经度
         * @param lat {number} 纬度
         */
        panTo:function(lon,lat){
             var point=new BMap.Point(lon,lat);
             map.panTo(point);
        },
        /**
         * GPS坐标转百度坐标
         * @param lon {number} 经度
         * @param lat {number} 纬度
         * @returns {object}   百度坐标对象
         */
        gpsLonLatToBaituLngLat:function(lon,lat){
            var baidu={lng:{},lat:{}};
            var gpsPoint = new BMap.Point(lon,lat);                                   // GPS坐标

            //坐标转换完之后的回调函数
            var translateCallback = function (point){
                baidu=point;
            };
            BMap.Convertor.translate(gpsPoint,0,translateCallback);                  // 真实经纬度转成百度坐标
            return baidu;
        },
        /**
         * Google坐标转百度坐标
         * @param lon {number} 经度
         * @param lat {number} 纬度
         * @returns {object}   百度坐标对象
         */
        googleLngLatToBaiduLngLat:function(lon,lat){
            var baidu={lng:{},lat:{}};
            var ggPoint = new BMap.Point(lon,lat);                                    // Google坐标
            var translateCallback = function (point){
                baidu=point;
            };
            BMap.Convertor.translate(ggPoint,2,translateCallback);                    //GCJ-02坐标转成百度坐标
            return baidu;
        },
        /**
         * 批量转换坐标
         * @param  type  {number}   参数2，表示是从GCJ-02坐标到百度坐标。参数0，表示是从GPS到百度坐标
         * @param jsonPoints {Array}  原始JSON坐标对象集合
         * @returns {Array}
         * @notice  百度和谷歌的经纬度坐标顺序是相反的
         */
        convertPoints:function(type,jsonPoints){
            var points = [],convertedPoints=[];
            if(jsonPoints){
                for ( var i = 0; i < jsonPoints.length; i++) {
                    var lonlat=jsonPoints[i];
                    var point=new BMap.Point(lonlat.lon,lonlat.lat);
                    points.push(point);
                }
            }
            var callback=function (xyResults){
                for(var index in xyResults){
                   xyResult = xyResults[index];
                   if(xyResult.error != 0){
                       continue;                                                        //出错就直接返回;
                   }
                   var point = new BMap.Point(xyResult.x, xyResult.y);
                   convertedPoints.push(point);
                }
            };
            BMap.Convertor.transMore(points,type,callback);                             // 参数2，表示是从GCJ-02坐标到百度坐标。参数0，表示是从GPS到百度坐标
            return convertedPoints;
        },
        /**
         * 打开一个信息窗口
         * @param jsonObj  {object}  JSON数据对象
         */
        addInfoWindow:function(jsonObj){
            var point=new BMap.Point(jsonObj.lon,jsonObj.lat);
            var opts = {
                  width : 200,                                                         // 信息窗口宽度
                  height: 60,                                                          // 信息窗口高度
                  title : jsonObj.name ,                                               // 信息窗口标题
                  enableMessage:true,                                                  // 设置允许信息窗发送短息
                  message:jsonObj.message                                              // 允许发送短信
            };
            var infoWindow = new BMap.InfoWindow("地址："+jsonObj.address, opts);       // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point);                                      // 开启信息窗口
        }
        
    };
    
    /**
     * 百度要素操作工具
     */
    BmapUtils.tootls={
        /**
         * @param pointA  百度坐标点A
         * @param pointB  百度坐标点B
         * @return {number}  距离大小：单位：米(meter)
         */
        distance:function(pointA,pointB){
            return map.getDistance(pointA,pointB);                                      //获取两点距离
        },
        /**
         * 添加折线(轨迹)
         *@param jsonPoints  原始JSON坐标对象集合
         */
        addLineFeature:function(jsonPoints){
            var points=[];
            if(jsonPoints){
                for ( var i = 0; i < jsonPoints.length; i++) {
                    var lonlat=jsonPoints[i];
                    var point=new BMap.Point(lonlat.lon,lonlat.lat);
                    points.push(point);
                }
            }
            var polyline = new BMap.Polyline(points, {strokeColor:"#08ffee", strokeWeight:3, strokeOpacity:0.5});
            map.addOverlay(polyline);                                                   //添加折线到地图上
        },
        /**
         * 添加折线(轨迹,包括起点、终点)
         *@param jsonPoints {array}       原始JSON坐标对象集合
         *@param startImageUrk  {string}  起点图片路径
         *@param endImageUrk  {string}    终点图片路径
         */
        addLineFeatureAndStartAndEndPoint:function(jsonPoints,startImageUrk,endImageUrk){
            var index=jsonPoints.length-1;
            var startPoint=new BMap.Point(jsonPoints[0].lon,jsonPoints[0].lat);
            var endPoint=new BMap.Point(jsonPoints[index].lon,jsonPoints[index].lat);
            var startIcon=BmapUtils.getIcon(startImageUrk);
            var endIcon=BmapUtils.getIcon(endImageUrk);
            var startMarker = new BMap.Marker(startPoint,{icon:startIcon});
            var endMarker = new BMap.Marker(endPoint,{icon:endIcon});
            map.addOverlay(startMarker); 
            map.addOverlay(endMarker); 
            this.addLineFeature(jsonPoints);
        },
        /**
         * 添加Marker对象
         * @param point    {object}     百度坐标点对象
         * @param jsonObj  {object}     Json对象
         * @param showLabel  {boolean}  是否显示标注的文本
         */
        addMarker:function(point,jsonObj,showLabel){
            var marker = new BMap.Marker(point);
            if(showLabel){
                    var label = new BMap.Label(jsonObj.name,{offset:new BMap.Size(20,-10)});
                    marker.setLabel(label);
            }
            map.addOverlay(marker); 
        },
        /**
         *定位i添加marker坐标
         * @param lon  {number}      经度
         * @param lat  {number}      纬度
         * @param isShow {boolean}   系统打开或关闭
         */
        addMarkerDisplayOrUnDisplay:function(lon,lat,isShow){
            var marker = new BMap.Marker(new BMap.Point(lon, lat));                // 创建标注
            map.addOverlay(marker);                                                // 将标注添加到地图中
            if(isShow){
                marker.show();
            }else{
                marker.hide();
            }
        },
        /**
         * 批量添加Marker对象
         * @param jsonPoints {Array}    Json坐标信息对象
         * @param showLabel  {boolean}  是否显示标注的文本
         */
        addMarkers:function(jsonPoints,showLabel){
            if(jsonPoints){
                for ( var i = 0; i < jsonPoints.length; i++) {
                    var jsonObj=jsonPoints[i];
                    var point=new BMap.Point(jsonObj.lon,jsonObj.lat);
                    this.addMarker(point,jsonObj,showLabel);
                }
            }
        },
        /**
         * 路径规划
         * @param startPoint {object}  起点
         * @param endPoint   {object}  终点
         * @param carImgUrl  {string}  车辆图片路径
         */
        addLineFeatureAndRun:function(startPoint,endPoint,carImgUrl){
            var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
            driving2.search(startPoint, endPoint);                                                        //显示一条公交线路

            var run = function (){
                var driving = new BMap.DrivingRoute(map);                                                 //驾车实例
                driving.search(myP1, myP2);
                driving.setSearchCompleteCallback(function(){
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();                      //通过驾车实例，获得一系列点的数组
                    var paths = pts.length;                                                               //获得有几个点

                    var carMk = new BMap.Marker(pts[0],{icon:BmapUtils.getIcon(carImgUrl)});
                    map.addOverlay(carMk);
                    i=0;
                    function resetMkPoint(i){
                        carMk.setPosition(pts[i]);
                        if(i < paths){
                            setTimeout(function(){ i++; resetMkPoint(i); },100);
                        }
                    }
                    setTimeout(function(){
                        resetMkPoint(5);
                    },100);

                });
            };

            setTimeout(function(){
                run();
            },500);
        },
        /**
         * 轨迹回放
         * @param  points  {Array}    百度坐标点集合
         * @param  carImgUrl {string} 车辆图片的地址
         */
        trackPlay:function(points,carImgUrl){
             var carMk = new BMap.Marker(points[0],{icon:BmapUtils.getIcon(carImgUrl)});
             map.addOverlay(carMk);
             var i=0;
             function resetMkPoint(i){
                  carMk.setPosition(points[i]);
                  if(i < paths){
                       setTimeout(function(){ i++; resetMkPoint(i); },100);
                  }
             }
             setTimeout(function(){
                    resetMkPoint(i);
             },100);
        },
        /**
         * 添加圆
         * @param lon  {number}      经度
         * @param lat  {number}      纬度
         * @param radius{number}     半径
         */
        addCircle:function(lon,lat,radius){
            var point = new BMap.Point(lon, lat);
            map.centerAndZoom(point, 16);
            var circle = new BMap.Circle(point,radius);
            map.addOverlay(circle);
        },
        /**
         * 添加多边形
         * @param points {array} 百度坐标点集合
         */
        addPolygon:function(points){
            var polygon = new BMap.Polygon(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
            map.addOverlay(polygon);
        }
    };
    
    /**
     * 百度探索处理
     */
    BmapUtils.search={
        /**
         * 本地探索
         * @param inputSuggestId  {string}     输入框的id属性
         * @param searchResultPanelId {string} 结果面板的id属性
         */
        localSearch:function(inputSuggestId,searchResultPanelId){
            function G(id) {
                return document.getElementById(id);
            }
            var ac = new BMap.Autocomplete(                   //建立一个自动完成的对象
                {"input" : inputSuggestId
                ,"location" : map
            });

            ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }    
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                
                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }    
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G(searchResultPanelId).innerHTML = str;
            });
            
            var myValue="",local={};
            var setPlace=function (){
                map.clearOverlays();                             //清除地图上所有覆盖物
                function myFun(){
                    var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));         //添加标注
                }
                local = new BMap.LocalSearch(map, {              //智能搜索
                  onSearchComplete: myFun
                });
                local.search(myValue);
            };
            ac.addEventListener("onconfirm", function(e) {       //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                G(searchResultPanelId).innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                setPlace();
            });
        }
    };
    
    BmapUtils.initCommonMap();                                                          // 初始化普通地图
    map.enableDragging();                                                               // 开启拖拽
    //map.disableDragging();                                                            // 禁止拖拽
    //map.enableInertialDragging();                                                     // 开启惯性拖拽
    map.enableScrollWheelZoom(true);                                                    // 允许鼠标滚轮缩放地图
    map.addControl(new BMap.NavigationControl());                                       // 添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));           // 左下角比例尺控件
    map.addControl(new BMap.OverviewMapControl());                                      // 添加默认缩略地图控件(鹰眼)
    var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(cr);                                                                 //添加版权控件（支持自定义版权控件）
    
})();