線を引く

drawPolyline() {
      let colorList = [
        "#c0392b",
        "#e74c3c",
        "#d35400",
        "#e67e22",
        "#f39c12",
        "#f1c40f",
        "#8e44ad",
        "#9b59b6",
        "#2980b9",
        "#3498db",
        "#27ae60",
        "#2ecc71",
        "#16a085",
        "#1abc9c"
      ]
      this.busPolyline = this.busPoint.map((item, index) => {
        let polyLine = new AMap.Polyline({
          map: this.map,
          path: item.path,
          title: item.name,
          strokeColor: colorList[index],
          strokeWeight: 4,
          outlineColor: "#fff",
          extData: {
            color: colorList[index],
            title: item.name,
            desc: [item.busStation.join("→")],
            img: []
          }
        })
        return polyLine;
      })
      this.busPolyline.forEach(item => {
        item.on('click', e => {
          this.busPolyline.forEach(subItem => {
            subItem.setOptions({
              strokeColor: subItem.getExtData().color,
              strokeWeight: 4,
              outlineColor: "#fff",
              isOutline: false
            })
          })
          e.target.setOptions({
            strokeColor: e.target.getExtData().color,
            strokeWeight: 4,
            outlineColor: "#fff",
            borderWeight: 2,
            isOutline: true
          })
          this.isDialogShow = false;
          if (e.target.getExtData().desc === "") {
            return
          }
          setTimeout(() => {
            this.isDialogShow = true;
          }, 500);
          console.log(this.msgDetail);

          this.msgDetail = e.target.getExtData();
          this.map.setFitView(e.target)
        })
      })
    },

drawPoint() {
      let shape = type => {
        return `
`}
      this.mapMarkers = this.mapPoint.map((item, index) => new AMap.Marker({
        content: shape(item.type),
        position: item.coordinate,
        map: this.map,
        title: item.xmmc,
        // offset: new AMap.Pixel(-15, -80),
        extData: {
          desc: item.desc,
          type: item.type,
          img: item.img,
          title: item.xmmc
        },
        topWhenClick: true
      }))
      this.mapMarkers.forEach((item) => {
        item.on('click', e => {
          this.mapMarkers.forEach(item => {
            item.setAnimation("AMAP_ANIMATION_NONE")
          })
          this.isDialogShow = false;
          item.setAnimation("AMAP_ANIMATION_BOUNCE")
          if (item.getExtData().desc === "") {
            return
          }
          setTimeout(() => {
            this.isDialogShow = true;
          }, 500);
          this.msgDetail = item.getExtData();
          this.map.setZoomAndCenter(17, [item.C.position.lng, item.C.position.lat])
        })
      })
    },