百度地图js简单路径规划
公沈浪
lujing.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>路线规划</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你得ak"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
<script src="./MakeJindu.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
// var driving = new BMap.DrivingRoute(map, {
// renderOptions: {
// map: map,
// autoViewport: true
// }
// });
// var start = new BMap.Point(116.310791, 40.003419);
// var end = new BMap.Point(116.486419, 39.877282);
// driving.search(start, end);
// setTimeout("driving.clearResults();", 5000 );
// //调用API聚合函数将标记数组显示在地图上
var MakeJindu = new BMap.MakeJindu(map, {});
console.log(MakeJindu);
var start={};
start['lng'] = 116.310791;
start['lat'] = 40.003419;
var end={};
end['lng'] = 116.486419;
end['lat'] = 39.877282;
// MakeJindu.driving(start,end);
MakeJindu.add_control();
MakeJindu._start = start;
MakeJindu._end = end;
// $(function(){
// $('.MakeJindu').click(function(){
// MakeJindu.clearResults();
// var classname=$(this).attr('class');
// // console.log($(this).attr('class'),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{
// }
// });
// })
// setTimeout("MakeJindu.clearResults();", 5000 );
// setTimeout("MakeJindu.transit(start,end);", 10000 );
// setTimeout("MakeJindu.clearResults();", 15000 );
// setTimeout("MakeJindu.walk(start,end);", 20000 );
// setTimeout("MakeJindu.clearResults();", 25000 );
// setTimeout("MakeJindu.riding(start,end);", 30000 );
// setTimeout("MakeJindu.clearResults();", 35000 );
// var riding = new BMap.RidingRoute(map, {
// renderOptions: {
// map: map,
// autoViewport: true
// }
// });
// var start = new BMap.Point(116.310791, 40.003419);
// var end = new BMap.Point(116.386419, 40.003519);
// riding.search(start, end);
// var transit = new BMap.TransitRoute(map, {
// renderOptions: {map: map, panel: "results"}
// });
// transit.search(start, end);
</script>
</body>
</html>
MakeJindu.js
/**
* @fileoverview MakeJindu 路径规划
* 主入口类是<script src="./MakeJindu.js"></script>，
* https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/routeplan
*
* @author Baidu Map Api Group
* @version 1.0
*/
/**
* @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 可选参数，可选项包括：<br />
* markers {Array<Marker>} 要聚合的标记数组<br />
* girdSize {Number} 聚合计算时网格的像素大小，默认60<br />
* maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合<br />
* minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2<br />
* isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点<br />
* styles {Array<IconStyle>} 自定义聚合后的图标风格，请参考TextIconOverlay类<br />
*/
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) + "<br>"; //获取时间
output += "总路程为：" ;
output += plan.getDistance(true) + "<br>"; //获取距离
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{
}
}
})();
类似资料：