画线

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]) }) }) },

你可能感兴趣的:(javascript,前端,map)