高德地图的基础控制类

Posted ly77461

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高德地图的基础控制类相关的知识,希望对你有一定的参考价值。

技术分享
/**
 *    @fileOverView 高德地图的基础控制类
 *    @author    yi.z
 *    @date 2014-02-19
 */
var AMaper = function (config) {
    var me = this,
        mapObj = null,
        markerMap = {},
        infoWindowMap = {};

    /**
     *    初始化地图
     *    @param data.mapInner: 加载地图的div的id 默认为mapDiv
     *  @param data.lng: 经度
     *    @param data.lat: 纬度
     */
    me.init = function (data) {
        var scrollWheel = true;
        if (config.scrollWheel == false) {
            scrollWheel = false;
        }
        if (document.getElementById(data.mapInner)) {
            mapObj = new AMap.Map(data.mapInner, {
                center: new AMap.LngLat(data.lng, data.lat),
                level: 12,
                scrollWheel: scrollWheel
            });
            googleLayer = new AMap.TileLayer({
                zIndex: 2, getTileUrl: function (t, e, o) {
                    return "http://mt1.google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x=" + t + "&y=" + e + "&z=" + o + "&s=Galil"
                }
            });
            googleLayer.setMap(mapObj);
            //加载工具条插件
            mapObj.plugin("AMap.ToolBar", function () {
                toolbar = new AMap.ToolBar({
                    direction: config.direction,//隐藏方向导航
                    ruler: config.ruler,//隐藏视野级别控制尺
                    autoPosition: config.autoPosition//禁止自动定位
                });
                mapObj.addControl(toolbar);
                toolbar.show(); //显示工具条
            });
            /*
                拖拽事件dragstart\dragging\dragend
            */
            AMap.event.addListener(mapObj, ‘click‘, function (e) {
                if (config.clickListener && $.type(config.clickListener) == "function") {
                    config.clickListener();
                }
                me.hideInfoWindows();
            });
        }
    };

    /**
     *    设置地图中心点
     *    @param 中心点经纬度对象
     */
    me.setCenter = function (latLng) {
        mapObj.setCenter(latLng);
    };

    /**
     *    获取地图中心点经纬度对象
     */
    me.getCenter = function () {
        return mapObj.getCenter();
    };

    /**
     *    设置地图缩放级别
     */
    me.setZoom = function (num) {
        mapObj.setZoom(num);
    };

    /**
     *    获取地图缩放级别
     */
    me.getZoom = function () {
        return mapObj.getZoom();
    };

    /**
     *    清除地图上的覆盖物
     */
    me.clearMap = function () {
        //mapObj.clearInfoWindow();
        //mapObj.removeOverlays();
        //mapObj.clearOverlays();
        markerMap = {};
        infoWindowMap = {};
        mapObj.clearMap();
    };

    /**
     *    调整到合理视野
     */
    me.setFitView = function () {
        var center = mapObj.setFitView().getCenter();
        return {
            lat: center.lat,
            lng: center.lng
        };
    };


    /**
     *    添加多个带文本poi点
     *    @param arr
     */
    me.addMarkers = function (arr) {
        var len = arr.length,
            i = 0;
        for (; i < len; i++) {
            me.addMarker(arr[i]);
        }
    };

    /**
     *    添加一个带文本poi点
     *     @param addEventListener  添加点是给点添加事件
     *    @param data.id
     *    @param data.lng 经度
     *    @param data.lat 纬度
     *    @param data.markerhtml 点的html结果 传html 是为了和业务分离
     *    //-----以下参数暂时不用
     *    @param data.name 文本
     *    @param data.num 编号
     *    @param data.type 类型 是poi还是hotel
     */
    me.addMarker = function (data, addEventListener) {
        var id = data.id,
            latLng = new AMap.LngLat(data.lng, data.lat);
        var marker = new AMap.Marker({
            map: mapObj,
            position: latLng, //基点位置
            offset: new AMap.Pixel(-18, -36), //相对于基点的偏移位置
            draggable: false,  //是否可拖动
            content: $(data.markerHtml)[0]   //自定义点标记覆盖物内容 注意这里需要一个DOM对象
        });
        marker.setMap(mapObj);  //在地图上添加点
        var $that = $(marker.getContent());
        addEventListener($that, latLng);
        markerMap[id] = marker;
    };

    me.getMarkerDom = function (id) {
        var marker = markerMap[id];
        if (marker) {
            return $(marker.getContent());
        }
    };

    /**
     *    删除一个点
     *    @param id
     */
    me.removeMarker = function (id) {
        var marker = markerMap[id];
        marker.setMap(null);
    };
    /**
     *    删除多个点
     *    @param id Array
     */
    me.removeMarkers = function (idArr) {
        var len = idArr.length,
            i = 0;
        for (; i < len; i++) {
            me.removeMarker(idArr[i]);
        }
    };

    /**
     *    创建或获取之前的对象,在打开信息窗口
     *    @param addEventListener 显示信息窗口时添加事件
     *    @param data.latLng 点的经纬度对象
     *    @param data.id 点的id
     *    @param data.infoHtml 信息窗口的html
     *    @param data.gOffset 针对谷歌地图的窗口偏移
     *    @param data.aOffset 针对高德地图的窗口偏移
     */
    me.createInfo = function (data, addEventListener) {
        var id = data.id,
            infoWindow = infoWindowMap[id];
        if (!infoWindow) {
            var info = $(data.infoHtml)[0],
                offset = data.aOffset || [-78, -47];
            infoWindow = new AMap.InfoWindow({
                isCustom: true,
                //offset:new AMap.Pixel(-78, -47),
                //offset:new AMap.Pixel(-23, -113),
                offset: new AMap.Pixel(offset[0], offset[1]),
                content: info
            });
            infoWindowMap[id] = infoWindow;
            addEventListener($(info));
        }
        infoWindow.open(mapObj, data.latLng);
    }

    /**
     *    检查一个info是否存在
     *    @param id
     */
    me.checkInfo = function (id) {
        if (infoWindowMap[id]) {
            return true;
        }
        return false;
    };

    /**
     *    获取一个info
     *    @param id
     */
    me.getInfo = function (id) {
        var infoWindow = infoWindowMap[id];
        if (infoWindow) {
            return infoWindow;
        }
        return null;
    };

    /**
     *    打开信息窗口
     *    @param id
     *    @param latLng 点的经纬度对象
     */
    me.openInfo = function (id) {
        var infoWindow = me.getInfo(id);
        infoWindow.open(mapObj);
    };

    /**
     *    隐藏一个信息窗口
     */
    me.hideInfoWindow = function (id) {
        var infoWindow = infoWindowMap[id];
        if (infoWindow) {
            infoWindow.close();
        }
    };

    /**
     *    隐藏信息窗口
     *    优化 避免重复创建信息窗口
     */
    me.hideInfoWindows = function () {
        for (var i in infoWindowMap) {
            if (infoWindowMap.hasOwnProperty(i)) {
                var infoWindow = infoWindowMap[i];
                infoWindow.close();
            }
        }
    };

    /**
     *    彻底消除信息窗口
     */
    me.clearInfoWindow = function () {
        infoWindowArr = {};
        mapObj.clearInfoWindow();
    };

    /**
     *    绘制路线
     *    @param data.start_xy
     *    @param data.end_xy
     *  @param data.steps
     */
    me.drawRoute = function (data) {
        var steps = data.steps;
        /* 起点到路线的起点 路线的终点到终点 绘制无道路部分  */
        var extra_path1 = new Array();
        extra_path1.push(data.start_xy);
        extra_path1.push(steps[0].path[0]);
        var extra_line1 = new AMap.Polyline({
            map: mapObj,
            path: extra_path1,
            strokeColor: "#71b7fc",
            strokeOpacity: 0.8,
            strokeWeight: 6,
            strokeStyle: "dashed",
            strokeDasharray: [7, 5]
        });

        var extra_path2 = new Array();
        var path_xy = steps[(steps.length - 1)].path;
        extra_path2.push(data.end_xy);
        extra_path2.push(path_xy[(path_xy.length - 1)]);
        var extra_line2 = new AMap.Polyline({
            map: mapObj,
            path: extra_path2,
            strokeColor: "#71b7fc",
            strokeOpacity: 0.8,
            strokeWeight: 6,
            strokeStyle: "dashed",
            strokeDasharray: [7, 5]
        });
        for (var s = 0; s < steps.length; s++) {
            var drawpath = steps[s].path;
            var polyline = new AMap.Polyline({
                map: mapObj,
                path: drawpath,
                strokeColor: "#71b7fc",
                strokeOpacity: 0.8,
                strokeWeight: 6
            });
        }
    };

    /**
     *    绘制步行导航路线
     *    @param arr    多个poi点的数组
     *    @param callBack 回调函数
     */
    me.drawWalkRoute = function (langArr, callBack) {
        var len = langArr.length,
            j = 0;
        for (; j < len - 1; j++) {
            if (j > 0) {
                callBack = function () { };
            }
            drawWalk([langArr[j], langArr[j + 1]], callBack);
        }
    };
    /**
     *    绘制两点间的步行导航路线
     *    @param arr    两个poi点的数组
     *    @param callBack 回调函数
     */
    function drawWalk(arr, callBack) {
        var start_xy = new AMap.LngLat(arr[0].lng, arr[0].lat);
        var end_xy = new AMap.LngLat(arr[1].lng, arr[1].lat);
        var MWalk;
        mapObj.plugin(["AMap.Walking"], function () {
            MWalk = new AMap.Walking(); //构造路线导航类
            //返回导航查询结果
            AMap.event.addListener(MWalk, "complete", function (data) {
                var result = { msg: 0 };
                if (data && data.routes && data.routes.length > 0) {
                    var routes = data.routes;
                    result.msg = 1;
                    var steps = routes[0].steps;
                    if (steps && $.isArray(steps) && steps.length > 0) {
                        me.drawRoute({
                            start_xy: start_xy,
                            end_xy: end_xy,
                            steps: steps
                        });
                    }
                    result.distance = routes[0].distance;
                    result.time = routes[0].time;
                    result.steps = [];
                    var len = steps.length,
                        i = 0;
                    for (; i < len; i++) {
                        result.steps.push(steps[i].instruction);
                    }
                }
                callBack(result);
            });
            MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线
        });
    }


    /**
     *    绘制驾车导航路线
     *    @param langArr 多个poi点的数组
     *    @param callBack 回调函数
     */
    me.drawDriveRoute = function (langArr, callBack) {
        var len = langArr.length,
            j = 0;
        for (; j < len - 1; j++) {
            if (j > 0) {
                callBack = function () { };
            }
            drawDrive([langArr[j], langArr[j + 1]], callBack);
        }
    };
    /**
     *    绘制两点间的驾车导航路线
     *    @param arr 两个poi点的数组
     *    @param callBack 回调函数
     */
    function drawDrive(arr, callBack) {
        var start_xy = new AMap.LngLat(arr[0].lng, arr[0].lat);
        var end_xy = new AMap.LngLat(arr[1].lng, arr[1].lat);
        var MDrive;
        mapObj.plugin(["AMap.Driving"], function () {
            var DrivingOption = {
                //驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
                policy: AMap.DrivingPolicy.LEAST_TIME
            };
            MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类
            AMap.event.addListener(MDrive, "complete", function (data) {
                var result = { msg: 0 };
                if (data && data.routes && data.routes.length > 0) {
                    var routes = data.routes;
                    result.msg = 1;
                    var steps = routes[0].steps;
                    if (steps && $.isArray(steps) && steps.length > 0) {
                        me.drawRoute({
                            start_xy: start_xy,
                            end_xy: end_xy,
                            steps: steps
                        });
                    }
                    result.distance = routes[0].distance;
                    result.time = routes[0].time;
                    result.steps = [];
                    var len = steps.length,
                        i = 0;
                    for (; i < len; i++) {
                        result.steps.push(steps[i].instruction);
                    }
                }
                callBack(result);
            }); //返回导航查询结果
            MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线
        });
    }


    /**
     *    绘制公交线路
     */
    me.drawPublicTransitLine = function (busArr, walkArr) {//绘制乘车的路线
        var i = 0,
            j = 0,
            busLen = busArr.length,
            walkLen = walkArr.length;
        for (var j = 0; j < busLen; j++) {
            new AMap.Polyline({
                map: mapObj,
                path: busArr[j],
                strokeColor: "#71b7fc",//线颜色
                strokeOpacity: 0.8,//线透明度
                strokeWeight: 6//线宽
            });
        }
        //绘制步行的路线
        for (var i = 0; i < walkLen; i++) {
            new AMap.Polyline({
                map: mapObj,
                path: walkArr[i],
                strokeColor: "#71b7fc", //线颜色
                strokeOpacity: 0.8, //线透明度
                strokeWeight: 6//线宽

            });
        }
    };

    /**
     *    绘制公交导航路线
     *    @param langArr 多个poi点的数组
     *    @param callBack 回调函数
     */
    me.drawPublicTransitRoute = function (langArr, callBack) {
        var len = langArr.length,
            j = 0;
        for (; j < len - 1; j++) {
            if (j > 0) {
                callBack = function () { };
            }
            drawPublicTransit([langArr[j], langArr[j + 1]], callBack);
        }
    };
    /**
     *    绘制两点之间的公交导航路线
     *    @param arr 两个poi点的数组
     *    @param callBack 回调函数
     */
    function drawPublicTransit(arr, callBack) {
        var start_xy = new AMap.LngLat(arr[0].lng, arr[0].lat);
        var end_xy = new AMap.LngLat(arr[1].lng, arr[1].lat);
        var trans,
            city = arr[0].city || "";
        /* 加载公交换乘插件 */
        mapObj.plugin(["AMap.Transfer"], function () {
            transOptions = {
                city: city,                            /* 公交城市 */
                policy: AMap.TransferPolicy.LEAST_TIME /* 乘车策略 */
            };
            /* 构造公交换乘类  */
            trans = new AMap.Transfer(transOptions);
            /* 返回导航查询结果  */
            AMap.event.addListener(trans, "complete", function (data) {
                var result = { msg: 0 };
                if (data.plans && data.plans.length > 0) {
                    /* 只取第一个路线方式 */
                    var plans = data.plans[0],
                        busArr = [],
                        walkArr = [];
                    result.distance = plans.distance;
                    result.time = plans.time;
                    result.steps = [];
                    segments = plans.segments;
                    if (segments && segments.length > 0) {
                        result.msg = 1;
                        var len = segments.length,
                            i = 0;
                        for (; i < len; i++) {
                            var s = segments[i];
                            if (s.transit_mode == "WALK") {
                                walkArr.push(s.transit.path);
                            } else {
                                busArr.push(s.transit.path);
                            }
                            result.steps.push(s.instruction);
                        }
                        me.drawPublicTransitLine(busArr, walkArr);
                    }
                }
                callBack(result);
            });
            //显示错误信息
            AMap.event.addListener(trans, "error", function (e) {
                var result = { msg: 0 };
                callBack(result);
            });
            //根据起、终点坐标查询公交换乘路线
            trans.search(start_xy, end_xy);
        });
    }

};
View Code

 

以上是关于高德地图的基础控制类的主要内容,如果未能解决你的问题,请参考以下文章

carplay语音控制高德地图没有反应

高德地图——地图图层

vue使用高德地图和mars3d地图如何切换

上传高德地图-express框架

Swift之高德地图自定义标注弹出气泡样式

手机高德地图导航原理