? ?臨時接到一個小任務，要封裝一個繪制帶有方向箭頭的折線的功能接口，就下面這種樣式：

百度地圖給的示例是這樣的：

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,//圖標縮放大小strokeColor:'#fff',//設置矢量圖標的線填充顏色strokeWeight: '2',//設置線寬 }); var icons = new BMap.IconSequence(sy, '10', '30'); // 創建polyline對象 var pois = [new BMap.Point(116.350658,39.938285),new BMap.Point(116.386446,39.939281),new BMap.Point(116.389034,39.913828),new BMap.Point(116.442501,39.914603) ]; var polyline =new BMap.Polyline(pois, {enableEditing: false,//是否啟用線編輯，默認為falseenableClicking: true,//是否響應點擊事件，默認為trueicons:[icons],strokeWeight:'8',//折線的寬度，以像素為單位strokeOpacity: 0.8,//折線的透明度，取值范圍0 - 1strokeColor:"#18a45b" //折線顏色 });

那個箭頭其實就是一連串的icons,不過要加入icons參數前得先創建Symbol,然后再根據BMap.IconSequence()方法創建出icons，同時也可對symbol樣式進行設定。

高德地圖的示例是這樣的：

var lineArr = [[116.368904, 39.913423],[116.382122, 39.901176],[116.387271, 39.912501],[116.398258, 39.904600]];var polyline = new AMap.Polyline({path: lineArr, //設置線覆蓋物路徑strokeColor: "#3366FF", //線顏色strokeOpacity: 1, //線透明度strokeWeight: 10, //線寬strokeStyle: "solid", //線樣式showDir:true,strokeDasharray: [10, 5] //補充線樣式});polyline.setMap(map);

其實就是加了一個showDir參數，不過這里箭頭的樣式就是固定的。

現在要解決的是把百度的和高德的接口封裝成一個統一的接口，以便根據需求，在不同的地圖下調用統一的接口。有兩種思路：

1.沿用百度的：

? ? ?

newSymbol(options){return new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,options); }newIconSequence(symbol){return new BMap.IconSequence(symbol, '10', '30'); }newPolyline(pointArr,polylineOptions,icons){polylineOptions["icons"]=[icons];return new BMap.Polyline(pointArr,polylineOptions); }

polylineOptions["icons"]=[icons];這里是我剛學到的小方法

polylineOptions={strokeOpacity: 1, strokeWeight: 8}跟json數組很像，原來還可以直接通過上面這行代碼插入icons:[icons]

由于高德地圖中并沒有Symbol，IconSequence這種方法，只是一個"showDir"參數。如果要封裝成統一接口的話，就只能寫空方法代替：

newSymbol(options){return null; }newIconSequence(symbol){return null; }newPolyline(pointArr,polylineOptions,icons){polylineOptions["path"]=pointArr;polylineOptions["showDir"]=true;return new AMap.Polyline(polylineOptions); }

這樣寫的話有個問題就是百度地圖下調用接口的話，icon樣式是可以由用戶定義的；但是在高德地圖下，雖然是暴露出定義icon樣式的方法，但是方法體是空的，因此不起作用，好像有點糊弄人。

2.沿用高德的

直接把icon樣式定死

封裝后的部分js代碼：

百度（BMap）：

newPolyline(pointArr,polylineOptions){let sy= new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,//圖標縮放大小strokeColor:'#fff',//設置矢量圖標的線填充顏色strokeWeight: '2',//設置線寬});let icons=new BMap.IconSequence(sy, '10', '30');polylineOptions["icons"]=[icons];return new BMap.Polyline(pointArr,polylineOptions); }

高德（AMap）：

newPolyline(pointArr,polylineOptions){polylineOptions["path"]=pointArr;polylineOptions["showDir"]=true;return new AMap.Polyline(polylineOptions); }

這樣也能做到接口的統一。

總結

以上是生活随笔為你收集整理的高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。