高德地图的基础控制类

/**
 *    @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);
        });
    }

};

时间: 2024-11-10 07:37:11

高德地图的基础控制类的相关文章

在第三方应用中打开高德地图的特色功能页面

由于最近的项目中需要在第三方应用中直接打开高德地图的电子狗页面,在高德开发者论坛找了一遍无果之后,只能自己反编译高德地图来找了,现在记录下来方便大家有类似需求时可以直接找到,这样就不需要反编译了. 高德地图有一些非常方便的特色功能,我们可以直接在第三方应用中打开高德地图的这些特色功能页面方便大家使用,前提是手机上必须要安装高德地图. 首先反编译高德地图的APK得到AndroidMainfest.xml文件: <?xml version="1.0" encoding="u

高德地图定位,并计算当前定位点和目标点距离

效果图: 1.下载高德地图和定位sdk,将demo中arm文件夹和jar包复制到libs中. 2.gradle 文件 apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.3" sourceSets{ main{ jniLibs.srcDirs=['libs'] } } defaultConfig { applicationId "myapp

Swift基础 - - 高德地图实践(一)

高德地图开发需要自己到官网http://lbs.amap.com/console/ 注册一个ak,新建一个swift工程,然后在Info.plist中添加一个NSLocationAlwaysUsageDescription或者NSLocationWhenInUseUsageDescription. 高德地图的库以及依赖库加入到项目里面 需要的库如下截图: 添加头文件 具体的方式见Swift基础--调用第三方OC项目,在Bridging-Header.h中加入如下代码,这样我们就可以调用高德地图相

C# 高德地图调用帮助类 GaodeHelper

/// <summary> /// 高德地图调用帮助类 /// 更多详情请参考 高德api /// </summary> public class GaodeHelper { //高德平台申请的秘钥 public static string SecretKey = "申请的秘钥"; /// <summary> /// 获取经纬度 /// </summary> /// <param name="address"&g

高德地图基础设置

1.引用高德地图 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <titl

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

使用高德地图绘制多边形区域

最近遇到一个需求,在网页上面编辑多边形的区域,并且需要能够判断一个点是否在这个多边形区域里面. 看了一下高德地图的jsapi,简单的做了一个demo. 1.你需要一个高德地图的账号,注册地址点击这里 2.登陆进去创建一个应用,这个时候就会给你一个对应的Key 3.查看高德地图的的demo,进入示例中心 4.学习一下左侧分类里面的 点标记 的示例,点标记里有涉及到高德地图事件,以及基础的类. 5.看完上面的,接下来我们接着学习折线,多边形,圆,这里我们就可以接触到AMap.Polygon这个类,以

Android 高德地图的定位,周边搜索

刚弄完这两个功能,当然是结合官网例子实现的.效果还行,稍作优化便可整合到app使用.在这里做一下总结,及说明下我的思路. 刚开始上手感觉比较乱学起来也比较累,方法,类太多,直接复制各种错,还不知道为什么这么做.现在我们一起交流下实现的思路: 1:定位:这是所有地图功能实现的基础,所以不管要实现诸如周边搜索啊,导航啊什么的都需要基于定位. 如何定位:官网上例子也很详细,主要是实现几个监听,并实现方法: aMap.setLocationSource(this);// 设置定位监听 //绑定监听 ma

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点