百度地圖Polyline畫直線BUG

時間 2019-11-12

標籤百度地圖 polyline 直線 bug 简体版

原文原文鏈接

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

默認Point1到point3是從低緯度到高緯度，因爲維度排序呈現遞增趨勢，也就是說，Point1是開始點，Point3是結束點，那麼展示的地圖的三個點能正常畫出連線。以下圖：

var polyline = new BMap.Polyline([
  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});

如今咱們來測試折線是否也存在這個問題，首先咱們也取同上三個座標點，把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 polyline = new BMap.Polyline([
  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});

咱們仔細觀察會發現，一樣的調整了座標序列順序，雖然折線繪畫出來了全部連線（如果直線則會出現斷線狀況），可是隻要調整了序列順序，繪畫出來的圖形就會發生變化。那麼咱們也許會疑問，

到底百度繪畫折線的規律是什麼？分析上面的列子，咱們總結出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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。