在開發過程中發現 vue-baidu-map 封裝的 BmPolyline 折線元件不能順利繪製出帶箭頭的紋理。

原因是 BmPolyline 文件中雖然有 icons 屬性，但是對應的原始檔中並沒有props接收 icons

最初的開發思路：

根據 vue-baidu-map 折線元件的官方文件，在vue中通過Prop，為 BmPolyline 元件傳遞一個 icons 陣列，陣列的元素必須為 IconSequence 類的例項物件。

而 IconSequence 類的例項物件則是在 BaiduMap 元件的 ready 事件中拿到 BMap 類和 map 地圖例項物件，然後依次呼叫 BMap

按照上述思路完成程式碼編寫後並不能得到預期中的結果。因為 BmPolyline 對應的原始檔中並沒有props接收 icons 。

解決方案

將 /node_modules/vue-baidu-map/components/overlays 目錄下的 BmPolyline 原始檔複製，貼上到另一個vue檔案中，然後手動為折線元件配置 icons

詳細解決方案見下方程式碼：

new_polyline.vue新的折線元件檔案

<script>
/**
 * 注意此處三個引入路徑
 * 在原始檔中使用的是相對路徑
 * 但是因為現在是自定義元件,所以要重新調整路徑
 */
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";

export default {
 // 起一個新名字
 name: "new-polyline",render() {},mixins: [commonMixin("overlay")],props: {
  path: {
   type: Array
  },// 新宣告一個icons
  icons: {
   type: Array
  },strokeColor: {
   type: String
  },strokeWeight: {
   type: Number
  },strokeOpacity: {
   type: Number
  },strokeStyle: {
   type: String
  },massClear: {
   type: Boolean,default: true
  },clicking: {
   type: Boolean,editing: {
   type: Boolean,default: false
  }
 },watch: {
  path: {
   handler(val,oldVal) {
    this.reload();
   },deep: true
  },strokeColor(val) {
   this.originInstance.setStrokeColor(val);
  },strokeOpacity(val) {
   this.originInstance.setStrokeOpacity(val);
  },strokeWeight(val) {
   this.originInstance.setStrokeWeight(val);
  },strokeStyle(val) {
   this.originInstance.setStrokeStyle(val);
  },editing(val) {
   val
    ? this.originInstance.enableEditing()
    : this.originInstance.disableEditing();
  },massClear(val) {
   val
    ? this.originInstance.enableMassClear()
    : this.originInstance.disableMassClear();
  },clicking(val) {
   this.reload();
  }
 },methods: {
  load() {
   const {
    BMap,map,path,// 引數解構 加入icons
    icons,strokeColor,strokeWeight,strokeOpacity,strokeStyle,editing,massClear,clicking
   } = this;
   const overlay = new BMap.Polyline(
    path.map(item =>
     createPoint(BMap,{
      lng: parseFloat(item.lng),lat: parseFloat(item.lat)
     })
    ),{
     strokeColor,// 配置icons
     icons,enableEditing: editing,enableMassClear: massClear,enableClicking: clicking
    }
   );
   this.originInstance = overlay;
   map.addOverlay(overlay);
   bindEvents.call(this,overlay);
  }
 }
};
</script>

地圖檔案

<template>
 <div class="container">
  <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="ready">
   <new-polyline
    v-if="points && points.length >= 2 && checkPoints({ points })"
    :path="points"
    :icons="icons"
    stroke-color="#0091ea"
    :stroke-opacity="0.8"
    :stroke-weight="10"
   ></new-polyline>
  </baidu-map>
 </div>
</template>
<script>
import newPolyline from "./new_polyline";
export default {
 components: {
  newPolyline
 },data() {
  return {
   center: {
    lng: 116.404,lat: 39.915
   },zoom: 5,points: [],icons: []
  };
 },methods: {
  ready({ BMap,map }) {
   this.points = this.getPointsSomehow();
   var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW,{
    scale: 0.5,// 圖示縮放大小
    strokeColor: "#fff",// 設定向量圖示的線填充顏色
    strokeWeight: "3" // 設定線寬
   });
   var icons = new BMap.IconSequence(sy,"5%","15%");
   this.icons.push(icons)
  },getPointsSomehow() {
   // 116.324356,39.980648
   // 118.532031,32.010158
   // 121.475599,31.380939
   var arr = [
    { lng: 116.324356,lat: 39.980648 },{ lng: 118.532031,lat: 32.010158 },{ lng: 121.475599,lat: 31.380939 }
   ];
   return arr;
  },// 查重 如果陣列中只有一組有意義的座標,繪製折線時可能會報錯,因為繪製一條折線需要兩組不同的座標點
  checkPoints({ points }) {
   // 拿到第一組點
   var originPoint = points[0];
   // 將第一組點與後續點進行對比 如果座標集合中只有一組實際座標點則return false
   // 只要座標集合中有兩組不同的實際座標點,則return true
   for (var i = 1; i < points.length; i++) {
    if (
     points[i].lat !== originPoint.lat ||
     points[i].lng !== originPoint.lng
    ) {
     return true;
    }
   }
   return false;
  }
 }
};
</script>

<style>
.map {
 width: 100%;
 height: 300px;
}
</style>

到此這篇關於vue 百度地圖(vue-baidu-map)繪製方向箭頭折線例項程式碼詳解的文章就介紹到這了,更多相關vue 百度地圖方向箭頭折線內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！