高德地图的基础控制类
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); }); } };
以上是关于高德地图的基础控制类的主要内容,如果未能解决你的问题,请参考以下文章