zoukankan      html  css  js  c++  java
  • 高德地图的基础控制类

    /**
     *    @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/lyrs=m@142&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(); //显示工具条
                });
                /*
                    拖拽事件dragstartdraggingdragend
                */
                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
  • 相关阅读:
    LeetCode之“数学”:Plus One
    LeetCode之“动态规划”:Dungeon Game
    LeetCode之“排序”:Largest Number
    LeetCode之“字符串”:ZigZag Conversion
    LeetCode之“数组”:Rotate Array
    HTML 5 简介、视频、Video + DOM、音频、拖放
    HTML 多媒体、Object 元素、音频、视频
    HTML5 Canvas、内联 SVG、Canvas vs. SVG
    HTML5 语义元素、迁移、样式指南和代码约定
    HTML5 简介、浏览器支持、新元素
  • 原文地址:https://www.cnblogs.com/ly77461/p/6892892.html
Copyright © 2011-2022 走看看