1. 程式人生 > >高德地圖的基礎控制類

高德地圖的基礎控制類

complete fit pixel 自定義 道路 ins aps zh-cn agg

技術分享
/**
 *    @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:[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

高德地圖的基礎控制類