百度地圖畫直線時有個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);
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>
<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>