<script>
/**
 * 注意此處三個(gè)引入路徑
 * 在源文件中使用的是相對(duì)路徑
 * 但是因?yàn)楝F(xiàn)在是自定義組件,所以要重新調(diào)整路徑
 */
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 {
 // 起一個(gè)新名字
 name: "new-polyline",
 render() {},
 mixins: [commonMixin("overlay")],
 props: {
  path: {
   type: Array
  },
  // 新聲明一個(gè)icons
  icons: {
   type: Array
  },
  strokeColor: {
   type: String
  },
  strokeWeight: {
   type: Number
  },
  strokeOpacity: {
   type: Number
  },
  strokeStyle: {
   type: String
  },
  massClear: {
   type: Boolean,
   default: true
  },
  clicking: {
   type: Boolean,
   default: true
  },
  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,
    // 參數(shù)解構(gòu) 加入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,
     strokeWeight,
     strokeOpacity,
     strokeStyle,
     // 配置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, // 圖標(biāo)縮放大小
    strokeColor: "#fff", // 設(shè)置矢量圖標(biāo)的線填充顏色
    strokeWeight: "3" // 設(shè)置線寬
   });
   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;
  },
  // 查重 如果數(shù)組中只有一組有意義的坐標(biāo),繪制折線時(shí)可能會(huì)報(bào)錯(cuò),因?yàn)槔L制一條折線需要兩組不同的坐標(biāo)點(diǎn)
  checkPoints({ points }) {
   // 拿到第一組點(diǎn)
   var originPoint = points[0];
   // 將第一組點(diǎn)與后續(xù)點(diǎn)進(jìn)行對(duì)比 如果坐標(biāo)集合中只有一組實(shí)際坐標(biāo)點(diǎn)則return false
   // 只要坐標(biāo)集合中有兩組不同的實(shí)際坐標(biāo)點(diǎn),則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>