路径规划数据获取与路径结果展示
文章简介
本文主要是方便路径规划的真实数据获取，对通过路径规划后的结果在原始地图上进行展示。使用的百度地图的开发者平台，不要自己重新搭建环境，可以直接利用浏览器内使用。
本文主要针对需要做物流规划和相关需求的，帮助增加文章的美观和相关数据的获取。
主要提供给相关小白使用
代码未完全整理和完整注释，无参考意义。
- 填坑 2020年12月19日
内容纲要
- 数据获取过程
- 工具绘制结果
- 源代码展示
- 存在的问题与相关文件展示
- 后续改进的点
使用的网站工具
- 百度地图开发者平台
- 百度地图API
http://lbsyun.baidu.com/index.php?title=jspopularGL
http://lbsyun.baidu.com/jsdemo.htm#aCreateMap
使用流程
代码
- 从地图上计算出实际的路径距离
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src=""></script> //api 密钥
<title>成都路径规划</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.1863914,30.56831464), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//输入地址
var pointA = new BMap.Point(103.983361,30.506996); // 接驳点A
var pointB = new BMap.Point(104.085712,30.56142); // 接驳点B
var pointC = new BMap.Point(103.914174,30.577327); // 接驳点C
var pointD = new BMap.Point(104.013591,30.678164); // 接驳点D
var pointE = new BMap.Point(104.11107,30.624904); // 接驳点E
var point_1 = new BMap.Point(104.19528600,30.55360800 ); // 货物点1
var point_2 = new BMap.Point(104.15329000,30.60361400 ); // 货物点2
var point_3 = new BMap.Point(104.26096800,30.94268200); // 货物点3
var point_4 = new BMap.Point(104.0387663,30.5926204); // 货物点4
var point_5 = new BMap.Point(104.285945,30.89786); // 货物点5
var point_6 = new BMap.Point(104.103042,30.62672); // 货物点6
var point_7 = new BMap.Point(103.91373467,30.78588634); // 货物点7
var point_8 = new BMap.Point(104.08616909,30.68366433); // 货物点8
var point_9 = new BMap.Point(104.09303184,30.69410299); // 货物点9
var point_10 = new BMap.Point(104.09189088,30.68525135); // 货物点10
var point_11 = new BMap.Point(104.16842597,30.70607383); // 货物点11
var point_12 = new BMap.Point(104.16382272,30.63222396); // 货物点12
var point_13 = new BMap.Point(104.0387663,30.5926204); // 货物点13
var point_14 = new BMap.Point(104.0918909,30.68525135); // 货物点14
var point_15 = new BMap.Point(103.962792,30.67581163); // 货物点15
var point_16 = new BMap.Point(104.0918909,30.68525135); // 货物点16
var point_17 = new BMap.Point(103.8302193,30.73321517); // 货物点17
var point_18 = new BMap.Point(104.0557793,30.4972847); // 货物点18
var point_19 = new BMap.Point(104.0960737,30.56356372); // 货物点19
var point_20 = new BMap.Point(104.0960737,30.56356372); // 货物点20
var point_21 = new BMap.Point(104.1863914,30.56831464); // 货物点21
var point_22 = new BMap.Point(104.0412402,30.61288179); // 货物点22
var point_23 = new BMap.Point(104.0852069,30.60515072); // 货物点23
var point_24 = new BMap.Point(103.8431373,30.68900168); // 货物点24
var point_25 = new BMap.Point(104.0667495,30.69237696); // 货物点25
var point_26 = new BMap.Point(104.0353249,30.73474685); // 货物点26
var point_27 = new BMap.Point(104.0555549,30.68104292); // 货物点27
var point_28 = new BMap.Point(104.0943076,30.69447615); // 货物点28
var point_29 = new BMap.Point(104.0965877,30.78607025); // 货物点29
var point_30 = new BMap.Point(104.0395691,30.68857604); // 货物点30
var point_31 = new BMap.Point(104.1079792,30.76830483); // 货物点31
var point_32 = new BMap.Point(104.0512715,30.72126606); // 货物点32
var point_33 = new BMap.Point(104.0259574,30.69137357); // 货物点33
var point_34 = new BMap.Point(104.061377,30.7356221); // 货物点34
var point_35 = new BMap.Point(104.0412402,30.61288179); // 货物点35
var point_36 = new BMap.Point(104.0918909,30.68525135); // 货物点36
var point_37 = new BMap.Point(104.0584111,30.68651299); // 货物点37
var point_38 = new BMap.Point(103.9869813,30.71419478); // 货物点38
var point_39 = new BMap.Point(104.085712,30.56142); // 货物点39
var point_40 = new BMap.Point(104.085712,30.56142); // 货物点40
var point_41 = new BMap.Point(104.085712,30.56142); // 货物点41
var point_42 = new BMap.Point(104.085712,30.56142); // 货物点42
a_label='接驳点A'
b_label='接驳点B'
C_label='接驳点C'
D_label='接驳点D'
E_label='接驳点E'
xx=[point_1,point_2,point_3,point_4,point_5,point_6,point_7,point_8,point_9,point_10,point_11,point_12,point_13,point_14,point_14,point_15,point_16,point_17,
point_18,point_19,point_20,point_21,point_22,point_23,point_24,point_25,point_26,point_27,point_28,point_29,point_30,point_31,point_32,point_33,point_34,point_35,point_36,point_37,point_38,point_39]
function mm(a) {
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f");}
var cc=mm(xx)
if(cc==true){
//alert('存在重新坐标')
}
else
{
alert('不存在重新坐标')
};
//标记地理坐标
for(i=0;i++,i<41;){
var p_label='货物点'+i
//alert(p_label)
label_show_1(xx[i], p_label) //标记坐标
}
label_show(pointA, a_label) //标记坐标
label_show(pointB,b_label) //标记坐标
label_show(pointC, C_label) //标记坐标
label_show(pointD,D_label) //标记坐标
label_show(pointE,E_label) //标记坐标
// 下载路径数据
alert('开始下载吗？')
/*for (j=-1;j++,j<41;){
for (i=j;i++,i<41;){
//var name='货物点'+i+'接驳点E' // 计算e到其他仓库点
//var name='货物点1'+'货物点'+i
//var name='货物点2'+'货物点'+i
c=j+1;
c_1=i+1;
var name='货物点'+c+'货物点'+c_1
//alert('调用成功'+i)
xiu_shi_1(xx[j],xx[i],name) //计算道路,以及时间
}};*/
// 补充两点间不完整数据
/*j=10
i=22;
c=j+1;
c_1=i+1;
var name='货物点'+c+'货物点'+c_1
//alert('调用成功'+i)
xiu_shi_1(xx[j],xx[i],name) //计算道路,以及时间
*/
// 仓库地址路径
for (i=-1;i++,i<40;){
var c=i+1
var name='货物点'+c+'接驳点D' // 计算e到其他仓库点
//var name='货物点1'+'货物点'+i
//var name='货物点2'+'货物点'+i
//alert('调用成功'+i)
xiu_shi_1(xx[i],pointD,name) //计算道路,以及时间
};
//补充仓库直接间缺失路径
/* i=36
c=i+1
var name='货物点'+c+'接驳点E' // 计算e到其他仓库点
xiu_shi_1(xx[i],pointE,name) //计算道路,以及时间
var name='接驳点E'+'接驳点E' // 计算e到其他仓库点
xiu_shi_1(pointE,pointE,name) //计算道路,以及时间
*/
//计算线路运输
function xiu_shi_1(point1,point2,name){
var polyline=map.getDistance(pointA,pointB)
var options = {
onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
//返回产生的开运行路径数目
var a_num=results.getNumPlans()
// 获取第一条方案
var plan = results.getPlan(0); //获取全部路径地理坐标——数组类型
//console.save(plan,name+'.json')//保存变量数据为，json
// 获取方案的驾车线路
var route = plan.getRoute(0);
// 获取每个关键步骤,并输出到页面
var a_time=plan.getDuration(false)//获取路线的运行 时间
var a_juli=plan.getDistance(false) //获取路线的距离 米
var cc=map.getDistance(point1,point2) //，两点间的直线距离
console.save(cc,name+'.txt')//保存变量数据
}
}
}
var driving = new BMap.DrivingRoute(map, options);
var start=point1;
var end=point2;
var p1=point1;
driving.search(start, end,{waypoints:[end]}); //经过的关键
//把路线画在图上
var driving_1 = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true}});
driving_1.search(point1,point2); //经过的关键点
//标记直线距离
//var polyline_1 = new BMap.Polyline([point1,point2], {strokeColor:"red", strokeWeight:5, strokeOpacity:0.3}); //定义折线
//map.addOverlay(polyline_1)
};
function label_show(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "4px",
height : "10px",
lineHeight : "10px",
fontFamily:"微软雅黑"
})
map.addOverlay(label)};
function label_show_1(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "black",
fontSize : "3px",
height : "9px",
lineHeight : "9px",
fontFamily:"微软雅黑"})
map.addOverlay(label)};
(function(console){
console.save = function(data, filename){
if(!data) {
console.error('Console.save: No data')
return;
}
if(!filename) filename = 'console.json'
if(typeof data === "object"){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
})(console)
</script>
</head>
<body>
</body>
</html>
- 将最优路径在地图上绘制展示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src=""></script> //api 密钥
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title>鼠标绘制工具</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.1863914,30.56831464), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
};
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//输入地址
var pointA = new BMap.Point(103.983361,30.506996); // 接驳点A
var pointB = new BMap.Point(104.085712,30.56142); // 接驳点B
var pointC = new BMap.Point(103.914174,30.577327); // 接驳点C
var pointD = new BMap.Point(104.013591,30.678164); // 接驳点D
var pointE = new BMap.Point(104.11107,30.624904); // 接驳点E
var point_1 = new BMap.Point(104.19528600,30.55360800 ); // 货物点1
var point_2 = new BMap.Point(104.15329000,30.60361400 ); // 货物点2
var point_3 = new BMap.Point(104.26096800,30.94268200); // 货物点3
var point_4 = new BMap.Point(104.0387663,30.5926204); // 货物点4
var point_5 = new BMap.Point(104.285945,30.89786); // 货物点5
var point_6 = new BMap.Point(104.103042,30.62672); // 货物点6
var point_7 = new BMap.Point(103.91373467,30.78588634); // 货物点7
var point_8 = new BMap.Point(104.08616909,30.68366433); // 货物点8
var point_9 = new BMap.Point(104.09303184,30.69410299); // 货物点9
var point_10 = new BMap.Point(104.09189088,30.68525135); // 货物点10
var point_11 = new BMap.Point(104.16842597,30.70607383); // 货物点11
var point_12 = new BMap.Point(104.16382272,30.63222396); // 货物点12
var point_13 = new BMap.Point(104.0387663,30.5926204); // 货物点13
var point_14 = new BMap.Point(104.0918909,30.68525135); // 货物点14
var point_15 = new BMap.Point(103.962792,30.67581163); // 货物点15
var point_16 = new BMap.Point(104.0918909,30.68525135); // 货物点16
var point_17 = new BMap.Point(103.8302193,30.73321517); // 货物点17
var point_18 = new BMap.Point(104.0557793,30.4972847); // 货物点18
var point_19 = new BMap.Point(104.0960737,30.56356372); // 货物点19
var point_20 = new BMap.Point(104.0960737,30.56356372); // 货物点20
var point_21 = new BMap.Point(104.1863914,30.56831464); // 货物点21
var point_22 = new BMap.Point(104.0412402,30.61288179); // 货物点22
var point_23 = new BMap.Point(104.0852069,30.60515072); // 货物点23
var point_24 = new BMap.Point(103.8431373,30.68900168); // 货物点24
var point_25 = new BMap.Point(104.0667495,30.69237696); // 货物点25
var point_26 = new BMap.Point(104.0353249,30.73474685); // 货物点26
var point_27 = new BMap.Point(104.0555549,30.68104292); // 货物点27
var point_28 = new BMap.Point(104.0943076,30.69447615); // 货物点28
var point_29 = new BMap.Point(104.0965877,30.78607025); // 货物点29
var point_30 = new BMap.Point(104.0395691,30.68857604); // 货物点30
var point_31 = new BMap.Point(104.1079792,30.76830483); // 货物点31
var point_32 = new BMap.Point(104.0512715,30.72126606); // 货物点32
var point_33 = new BMap.Point(104.0259574,30.69137357); // 货物点33
var point_34 = new BMap.Point(104.061377,30.7356221); // 货物点34
var point_35 = new BMap.Point(104.0412402,30.61288179); // 货物点35
var point_36 = new BMap.Point(104.0918909,30.68525135); // 货物点36
var point_37 = new BMap.Point(104.0584111,30.68651299); // 货物点37
var point_38 = new BMap.Point(103.9869813,30.71419478); // 货物点38
var point_39 = new BMap.Point(104.085712,30.56142); // 货物点39
var point_40 = new BMap.Point(104.085712,30.56142); // 货物点40
var point_41 = new BMap.Point(104.085712,30.56142); // 货物点41
var point_42 = new BMap.Point(104.085712,30.56142); // 货物点42
a_label='接驳点A'
b_label='接驳点B'
C_label='接驳点C'
D_label='接驳点D'
E_label='接驳点E'
xx=[point_1,point_2,point_3,point_4,point_5,point_6,point_7,point_8,point_9,point_10,point_11,point_12,point_13,point_14,point_14,point_15,point_16,point_17,point_18,point_19,point_20,point_21,point_22,point_23,point_24,point_25,point_26,point_27,point_28,point_29,point_30,point_31,point_32,point_33,point_34,point_35,point_36,point_37,point_38,point_39]
function mm(a) {
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f");}
var cc=mm(xx)
if(cc==true){
//alert('存在重新坐标')
}
else
{
alert('不存在重新坐标')
};
//标记地理坐标
for(i=-1;i++,i<38;){
var x_x_1=i+1
var p_label='货物点'+x_x_1
//alert(p_label)
label_show_1(xx[i], p_label) //标记坐标
}
label_show(pointA, a_label) //标记坐标
label_show(pointB,b_label) //标记坐标
label_show(pointC, C_label) //标记坐标
label_show(pointD,D_label) //标记坐标
label_show(pointE,E_label) //标记坐标
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
function label_show(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "4px",
height : "10px",
lineHeight : "10px",
fontFamily:"微软雅黑"
})
map.addOverlay(label)};
function label_show_1(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "black",
fontSize : "3px",
height : "9px",
lineHeight : "9px",
fontFamily:"微软雅黑"})
map.addOverlay(label)};
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
</script>
</body>
</html>
- 绘制需求地点与位置
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src=""></script> // api 密钥
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title>鼠标绘制工具</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.1863914,30.56831464), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
};
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//输入地址
var pointA = new BMap.Point(103.983361,30.506996); // 接驳点A
var pointB = new BMap.Point(104.085712,30.56142); // 接驳点B
var pointC = new BMap.Point(103.914174,30.577327); // 接驳点C
var pointD = new BMap.Point(104.013591,30.678164); // 接驳点D
var pointE = new BMap.Point(104.11107,30.624904); // 接驳点E
var point_1 = new BMap.Point(104.19528600,30.55360800 ); // 货物点1
var point_2 = new BMap.Point(104.15329000,30.60361400 ); // 货物点2
var point_3 = new BMap.Point(104.26096800,30.94268200); // 货物点3
var point_4 = new BMap.Point(104.0387663,30.5926204); // 货物点4
var point_5 = new BMap.Point(104.285945,30.89786); // 货物点5
var point_6 = new BMap.Point(104.103042,30.62672); // 货物点6
var point_7 = new BMap.Point(103.91373467,30.78588634); // 货物点7
var point_8 = new BMap.Point(104.08616909,30.68366433); // 货物点8
var point_9 = new BMap.Point(104.09303184,30.69410299); // 货物点9
var point_10 = new BMap.Point(104.09189088,30.68525135); // 货物点10
var point_11 = new BMap.Point(104.16842597,30.70607383); // 货物点11
var point_12 = new BMap.Point(104.16382272,30.63222396); // 货物点12
var point_13 = new BMap.Point(104.0387663,30.5926204); // 货物点13
var point_14 = new BMap.Point(104.0918909,30.68525135); // 货物点14
var point_15 = new BMap.Point(103.962792,30.67581163); // 货物点15
var point_16 = new BMap.Point(104.0918909,30.68525135); // 货物点16
var point_17 = new BMap.Point(103.8302193,30.73321517); // 货物点17
var point_18 = new BMap.Point(104.0557793,30.4972847); // 货物点18
var point_19 = new BMap.Point(104.0960737,30.56356372); // 货物点19
var point_20 = new BMap.Point(104.0960737,30.56356372); // 货物点20
var point_21 = new BMap.Point(104.1863914,30.56831464); // 货物点21
var point_22 = new BMap.Point(104.0412402,30.61288179); // 货物点22
var point_23 = new BMap.Point(104.0852069,30.60515072); // 货物点23
var point_24 = new BMap.Point(103.8431373,30.68900168); // 货物点24
var point_25 = new BMap.Point(104.0667495,30.69237696); // 货物点25
var point_26 = new BMap.Point(104.0353249,30.73474685); // 货物点26
var point_27 = new BMap.Point(104.0555549,30.68104292); // 货物点27
var point_28 = new BMap.Point(104.0943076,30.69447615); // 货物点28
var point_29 = new BMap.Point(104.0965877,30.78607025); // 货物点29
var point_30 = new BMap.Point(104.0395691,30.68857604); // 货物点30
var point_31 = new BMap.Point(104.1079792,30.76830483); // 货物点31
var point_32 = new BMap.Point(104.0512715,30.72126606); // 货物点32
var point_33 = new BMap.Point(104.0259574,30.69137357); // 货物点33
var point_34 = new BMap.Point(104.061377,30.7356221); // 货物点34
var point_35 = new BMap.Point(104.0412402,30.61288179); // 货物点35
var point_36 = new BMap.Point(104.0918909,30.68525135); // 货物点36
var point_37 = new BMap.Point(104.0584111,30.68651299); // 货物点37
var point_38 = new BMap.Point(103.9869813,30.71419478); // 货物点38
var point_39 = new BMap.Point(104.085712,30.56142); // 货物点39
var point_40 = new BMap.Point(104.085712,30.56142); // 货物点40
var point_41 = new BMap.Point(104.085712,30.56142); // 货物点41
var point_42 = new BMap.Point(104.085712,30.56142); // 货物点42
a_label='接驳点A'
b_label='接驳点B'
C_label='接驳点C'
D_label='接驳点D'
E_label='接驳点E'
xx=[point_1,point_2,point_3,point_4,point_5,point_6,point_7,point_8,point_9,point_10,point_11,point_12,point_13,point_14,point_14,point_15,point_16,point_17,point_18,point_19,point_20,point_21,point_22,point_23,point_24,point_25,point_26,point_27,point_28,point_29,point_30,point_31,point_32,point_33,point_34,point_35,point_36,point_37,point_38,point_39]
function mm(a) {
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f");}
var cc=mm(xx)
if(cc==true){
//alert('存在重新坐标')
}
else
{
alert('不存在重新坐标')
};
//标记地理坐标
for(i=-1;i++,i<38;){
var x_x_1=i+1
var p_label='货物点'+x_x_1
//alert(p_label)
label_show_1(xx[i], p_label) //标记坐标
}
label_show(pointA, a_label) //标记坐标
label_show(pointB,b_label) //标记坐标
label_show(pointC, C_label) //标记坐标
label_show(pointD,D_label) //标记坐标
label_show(pointE,E_label) //标记坐标
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
function label_show(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "4px",
height : "10px",
lineHeight : "10px",
fontFamily:"微软雅黑"
})
map.addOverlay(label)};
function label_show_1(point,a_111){
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(3, -3) //设置文本偏移量
}
var label = new BMap.Label(a_111, opts); // 创建文本标注对象
label.setStyle({
color : "black",
fontSize : "3px",
height : "9px",
lineHeight : "9px",
fontFamily:"微软雅黑"})
map.addOverlay(label)};
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
</script>
</body>
</html>
结果展示
扫一扫
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
