百度地图js简单路径规划

lizhihua0625
176 阅读4分钟

lujing.html `

路线规划 body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
`

MakeJindu.js

`/**

/**

  • @namespace BMap */ var BMap = window.BMap = BMap || {}; (function(){

    /**

    • 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
    • @param {Map} map BMap.Map的实例化对象
    • @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
    • @param {Number} gridSize 要扩大的像素值
    • @return {BMap.Bounds} 返回扩大后的视图范围。 */ var getExtendedBounds = function(map, bounds, gridSize){ bounds = cutBoundsInRange(bounds); var pixelNE = map.pointToPixel(bounds.getNorthEast()); var pixelSW = map.pointToPixel(bounds.getSouthWest()); pixelNE.x += gridSize; pixelNE.y -= gridSize; pixelSW.x -= gridSize; pixelSW.y += gridSize; var newNE = map.pixelToPoint(pixelNE); var newSW = map.pixelToPoint(pixelSW); return new BMap.Bounds(newSW, newNE); };

    /**

    • 按照百度地图支持的世界范围对bounds进行边界处理
    • @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
    • @return {BMap.Bounds} 返回不越界的视图范围 */ var cutBoundsInRange = function (bounds) { var maxX = getRange(bounds.getNorthEast().lng, -180, 180); var minX = getRange(bounds.getSouthWest().lng, -180, 180); var maxY = getRange(bounds.getNorthEast().lat, -74, 74); var minY = getRange(bounds.getSouthWest().lat, -74, 74); return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY)); };

    /**

    • 对单个值进行边界处理。
    • @param {Number} i 要处理的数值
    • @param {Number} min 下边界值
    • @param {Number} max 上边界值
    • @return {Number} 返回不越界的数值 */ var getRange = function (i, mix, max) { mix && (i = Math.max(i, mix)); max && (i = Math.min(i, max)); return i; };

    /**

    • 判断给定的对象是否为数组
    • @param {Object} source 要测试的对象
    • @return {Boolean} 如果是数组返回true，否则返回false */ var isArray = function (source) { return '[object Array]' === Object.prototype.toString.call(source); };

    /**

    • 返回item在source中的索引位置
    • @param {Object} item 要测试的对象
    • @param {Array} source 数组
    • @return {Number} 如果在数组内，返回索引，否则返回-1 */ var indexOf = function(item, source){ var index = -1; if(isArray(source)){ if (source.indexOf) { index = source.indexOf(item); } else { for (var i = 0, m; m = source[i]; i++) { if (m === item) { index = i; break; } } } }
      return index; };

    // 定义一个控件类，即function
    var GuihuaControl = function(){

     // 设置默认停靠位置和偏移量  
 this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;    
 this.defaultOffset = new BMap.Size(10, 80);

    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    GuihuaControl.prototype = new BMap.Control(); // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回

    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    GuihuaControl.prototype.initialize = function(map){ if (!map){ return; } // 创建一个DOM元素
    var div = document.createElement("div"); var bt1=document.createElement("button"); bt1.innerHTML="驾车"; bt1.className="MakeJindu driving"; // 添加文字说明
    div.appendChild(bt1); bt1.onclick = myEvent;

     var bt2=document.createElement("button");
 bt2.innerHTML="公交";
 bt2.className="MakeJindu transit";
 // 添加文字说明    
 div.appendChild(bt2);    
 bt2.onclick = myEvent;


 var bt3=document.createElement("button");
 bt3.innerHTML="步行";
 bt3.className="MakeJindu walk";
 // 添加文字说明    
 div.appendChild(bt3);     
 bt3.onclick = myEvent;

 var bt4=document.createElement("button");
 bt4.innerHTML="骑行";
 bt4.className="MakeJindu riding";
 // 添加文字说明    
 div.appendChild(bt4);     
 bt4.onclick = myEvent;

 var bt5=document.createElement("button");
 bt5.innerHTML="清除";
 bt5.className="MakeJindu clearResults";
 // 添加文字说明    
 div.appendChild(bt5);     
 bt5.onclick = myEvent;

 var bt6=document.createElement("button");
 bt6.innerHTML="关闭";
 bt6.className="MakeJindu delete_control";
 // 添加文字说明
 div.appendChild(bt6);   
 bt6.onclick = myEvent;

 var bt7=document.createElement("div");
 bt7.innerHTML="";
 bt7.className="MakeJindu_time";
 // 添加文字说明
 div.appendChild(bt7); 

 // 设置样式    
 div.style.cursor = "pointer";    
 div.style.border = "1px solid gray";    
 div.style.backgroundColor = "white";
 // 添加DOM元素到地图中   
 map.getContainer().appendChild(div);        
 // 将DOM元素返回
 return div;

    }

    /** @exports MakeJindu as BMap.MakeJindu / var MakeJindu =
    /     * MakeJindu * @class 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能 * @constructor * @param {Map} map 地图的一个实例。 * @param {Json Object} options 可选参数，可选项包括：
    * markers {Array} 要聚合的标记数组
    * girdSize {Number} 聚合计算时网格的像素大小，默认60
    * maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合
    * minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
    * isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点
    * styles {Array} 自定义聚合后的图标风格，请参考TextIconOverlay类
    */ BMap.MakeJindu = function(map, options){ if (!map){ return; } this._map = map; this._markers = []; this._clusters = []; this._luxian=null;

         var opts = options || {};
     // console.log(opts)
     // this._gridSize = opts["gridSize"] || 60;
     // this._maxZoom = opts["maxZoom"] || 18;
     // this._minClusterSize = opts["minClusterSize"] || 2;           
     // this._isAverageCenter = false;
     this._start = {}
     this._end = {}
     // 创建控件实例    
     this.myGuihuaControl = new GuihuaControl(map);
 };

    var searchComplete = function (results){ // console.log(results) // if (transit.getStatus() != BMAP_STATUS_SUCCESS){ // return ; // } var plan = results.getPlan(0); // console.log(plan) var output='总耗时为：'; output += plan.getDuration(true) + "
    "; //获取时间 output += "总路程为：" ; output += plan.getDistance(true) + "
    "; //获取距离 console.log(output); document.getElementsByClassName("MakeJindu_time")[0].innerHTML = output; }

    /**

    • 基础驾车路线规划服务
    • @param start,end
    • var start = new BMap.Point(116.310791, 40.003419);
    • var end = new BMap.Point(116.486419, 39.877282);
    • @return 无返回值。 */ MakeJindu.prototype.driving = function(start,end){ var driving = new BMap.DrivingRoute(this._map, { renderOptions: { map: this._map, autoViewport: true } }); if(start==null||!Object.prototype.hasOwnProperty.call(start,"lng")){ return } if(end==null||!Object.prototype.hasOwnProperty.call(end,"lng")){ return } var start = new BMap.Point(start['lng'], start['lat']); var end = new BMap.Point(end['lng'], end['lat']); driving.search(start, end); driving.setSearchCompleteCallback(searchComplete); // console.log(driving.setSearchCompleteCallback(searchComplete)); this._luxian = driving; // setTimeout("MakeJindu.clearResults();", 60000 ); };

    /**

    • 公交路线规划
    • @param start,end
    • @return 无返回值。 */ MakeJindu.prototype.transit = function(start,end){ var transit = new BMap.TransitRoute(this._map, { renderOptions: { map: this._map, autoViewport: true } }); if(start==null||!Object.prototype.hasOwnProperty.call(start,"lng")){ return } if(end==null||!Object.prototype.hasOwnProperty.call(end,"lng")){ return } var start = new BMap.Point(start['lng'], start['lat']); var end = new BMap.Point(end['lng'], end['lat']); transit.search(start, end); transit.setSearchCompleteCallback(searchComplete); this._luxian = transit; // setTimeout("MakeJindu.clearResults();", 60000 ); };

    /**

    • 步行路线规划
    • @param start,end
    • @return 无返回值。 */ MakeJindu.prototype.walk = function(start,end){ var walk = new BMap.WalkingRoute(this._map, { renderOptions: {map: this._map} }); if(start==null||!Object.prototype.hasOwnProperty.call(start,"lng")){ return } if(end==null||!Object.prototype.hasOwnProperty.call(end,"lng")){ return } var start = new BMap.Point(start['lng'], start['lat']); var end = new BMap.Point(end['lng'], end['lat']); walk.search(start, end); walk.setSearchCompleteCallback(searchComplete); this._luxian = walk; // setTimeout("MakeJindu.clearResults();", 60000 ); };

    /**

    • 骑行线路规划
    • @param start,end
    • @return 无返回值。 */ MakeJindu.prototype.riding = function(start,end){ var riding = new BMap.RidingRoute(this._map, { renderOptions: {map: this._map} }); if(start==null||!Object.prototype.hasOwnProperty.call(start,"lng")){ return } if(end==null||!Object.prototype.hasOwnProperty.call(end,"lng")){ return } var start = new BMap.Point(start['lng'], start['lat']); var end = new BMap.Point(end['lng'], end['lat']); riding.search(start, end); riding.setSearchCompleteCallback(searchComplete); this._luxian = riding; // setTimeout("MakeJindu.clearResults();", 60000 ); };

    /**

    • 清除最近一次检索的结果
    • @param start,end
    • @return 无返回值。 */ MakeJindu.prototype.clearResults = function(){ if(this._luxian!=null){ this._luxian.clearResults(); document.getElementsByClassName("MakeJindu_time")[0].innerHTML = ''; this._luxian=null; } };

    /**

    • 添加控件
    • @param
    • @return 无返回值。 */ MakeJindu.prototype.add_control = function(){ this._map.addControl(this.myGuihuaControl); };

    /**

    • 移除控件
    • @param
    • @return 无返回值。 */ MakeJindu.prototype.delete_control = function(){ this._map.removeControl(this.myGuihuaControl); };

    var myEvent = function(){ var MakeJindu = window.MakeJindu; MakeJindu.clearResults(); var classname=this.getAttribute("class"); var start = MakeJindu._start; var end = MakeJindu._end; // console.log('myEvent',classname,start,end,classname.indexOf('transit')); if (classname.indexOf('driving')>-1) { MakeJindu.driving(start,end); } else if(classname.indexOf('transit')>-1) { MakeJindu.transit(start,end); } else if(classname.indexOf('walk')>-1) { MakeJindu.walk(start,end); } else if(classname.indexOf('riding')>-1) { MakeJindu.riding(start,end); } else if(classname.indexOf('clearResults')>-1) { MakeJindu.clearResults(); } else if(classname.indexOf('delete_control')>-1) { MakeJindu.delete_control(); }else{

     }

    }

})(); `

avatar
文章
阅读
粉丝