百度地图Polyline画直线BUG
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
百度地图画直线时有个BUG，取三个坐标点测试，
var point1= new BMap.Point( 113.33765, 23.150435);
var point2= new BMap.Point( 113.347655, 23.160435);
var point3= new BMap.Point( 113.357655, 23.170435);
var point2= new BMap.Point( 113.347655, 23.160435);
var point3= new BMap.Point( 113.357655, 23.170435);
默认Point1到point3是从低纬度到高纬度，由于维度排序呈现递增趋势，也就是说，Point1是开始点，Point3是结束点，那么展现的地图的三个点能正常画出连线。如下图：
var polyline = new BMap.Polyline([
point1,
point2,
point3
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
point1,
point2,
point3
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
现在我们把专递的序列顺序调换为point1->point3->point2,那么就出现问题，直线不能完整的绘画，只连接的两个点，这是因为百度地图的Polyline对象内为对转入的坐标点按其坐标位置
进行排序导致的，测试如下：
var polyline = new BMap.Polyline([
point1,
point3,
point2
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
point1,
point3,
point2
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
现在我们来测试折线是否也存在这个问题，首先我们也取同上三个坐标点，把point2经度向东移动稍微调下，使得三个点不再一条直线上。
var point1= new BMap.Point( 113.33765, 23.150435);//保持不变
var point2= new BMap.Point( 113.347655, 23.160435);//经度向东移动0.02为：（ 113.347655, 23.160435）->( 113.367655, 23.160435)
var point3= new BMap.Point( 113.357655, 23.170435);//保持不变
绘图顺序为：
var point2= new BMap.Point( 113.347655, 23.160435);//经度向东移动0.02为：（ 113.347655, 23.160435）->( 113.367655, 23.160435)
var point3= new BMap.Point( 113.357655, 23.170435);//保持不变
绘图顺序为：
var polyline = new BMap.Polyline([
point1,
point3,
point2
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
point1,
point3,
point2
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
效果如下：
为了同直线做对比，我们把坐标顺序调整为：
var polyline = new BMap.Polyline([
point1,
point2,
point3
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
point1,
point2,
point3
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
我们仔细观察会发现，同样的调整了坐标序列顺序，虽然折线绘画出来了所有连线（若是直线则会出现断线情况），但是只要调整了序列顺序，绘画出来的图形就会发生变化。那么我们也许会疑问，
到底百度绘画折线的规律是什么？分析上面的列子，我们总结出Polyline对象画线的规律为：
1.直线：（简单理解为从开始点到结束点）
1.1 同经度时，从低纬度到高纬度。
1.2 同纬度时，从小经度度到大经度。
2.折线：（不分经纬度大小高低，只是按坐标序列先后依次将各个点连接）
==================================================测试代码=====================================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<style type=“text/css”>
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;}
#l-map{height: 100%;width: 78%;float:left;border-right: 2px solid #bcbcbc;}
#r-result{height: 100%;width: 20%;float:left;}
</style>
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.4″></script>
<title>折线 </title>
</head>
<body>
<div id=“allmap”></div>
</body>
</html>
<script type=”text/javascript”>
var map = new BMap.Map( “allmap”);
var point = new BMap.Point( 113.347655, 23.160435);
map.centerAndZoom(point, 15);
var point1= new BMap.Point( 113.33765, 23.150435);
var point2= new BMap.Point( 113.347655, 23.160435);
var point3= new BMap.Point( 113.357655, 23.170435);
var marker1 = new BMap.Marker(point1); // 创建标注
var marker2 = new BMap.Marker(point2); // 创建标注
var marker3 = new BMap.Marker(point3); // 创建标注
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<style type=“text/css”>
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;}
#l-map{height: 100%;width: 78%;float:left;border-right: 2px solid #bcbcbc;}
#r-result{height: 100%;width: 20%;float:left;}
</style>
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.4″></script>
<title>折线 </title>
</head>
<body>
<div id=“allmap”></div>
</body>
</html>
<script type=”text/javascript”>
var map = new BMap.Map( “allmap”);
var point = new BMap.Point( 113.347655, 23.160435);
map.centerAndZoom(point, 15);
var point1= new BMap.Point( 113.33765, 23.150435);
var point2= new BMap.Point( 113.347655, 23.160435);
var point3= new BMap.Point( 113.357655, 23.170435);
var marker1 = new BMap.Marker(point1); // 创建标注
var marker2 = new BMap.Marker(point2); // 创建标注
var marker3 = new BMap.Marker(point3); // 创建标注
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
var polyline = new BMap.Polyline([
point1,
point2,
point3
], {strokeColor: “blue”, strokeWeight: 6, strokeOpacity: 0.5});
map.addOverlay(polyline);
var view = map.getViewport([
point1,
point2,
point3
]);
map.centerAndZoom(view.center, view.zoom);
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”></script>
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
转载自：https://blog.csdn.net/ugfdfgg/article/details/83870801
