高德.js地图自定义图标和样式,以及绘制轨迹

效果如图

    // 初始化高德地图
    initMap() {
      AMapLoader.load({
        key: "xxxxxx", //key值是key值 和安全密钥不同
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.GeoJSON",
          "AMap.MarkerClusterer",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.Polyline",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表,用到的再次注册，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map("mapContainer", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11.4, // 初始化地图级别
          center: [114.885796, 40.768555], //中心点坐标
          resizeEnable: true,
        });
        //使用CSS默认样式定义地图上的鼠标样式
        this.map.setDefaultCursor("pointer");

        let styleName = "amap://styles/whitesmoke";
        this.map.setMapStyle(styleName);
        this.setMraker();
      });
    },
    setMraker() {
      let markers = [];
      //       this.positions = [
      //         [
      //           [114.843285, 40.820673],
      //           [114.92866, 40.790092],
      //           [115.008573, 40.788344],
      //         ],
      //         [
      //           [114.843285, 40.820673],
      //           [114.92866, 40.790092],
      //           [114.985002, 40.773048],
      //         ],
      //         [
      //           [114.682884, 40.817397],
      //           [114.707892, 40.788125],
      //         ],
      //       ];
      for (let i = 0; i < this.mapPointsList.length; i++) {
        const arr = this.mapPointsList[i];

        for (let k = 0; k < arr.length; k++) {
          const element = arr[k];
          for (let j = 0; j < element.length; j++) {
            const item = element[j];
            console.log(item, " item");

            let pointsArr = [
              parseFloat(item.cordsArr[0]),
              parseFloat(item.cordsArr[1]),
            ];

            let pointUrls =
              "xxx.png";
            let bgtTM = "https://xxxxx/dma/img/icon_19.png";
            // 获取当 marker 类型的覆盖物
            // 创建点面覆盖物实例
            let icon = new AMap.Icon({
              // 图标尺寸
              // 图标的取图地址
              image: item.pointUrl ? item.pointUrl : pointUrls,
              // 图标所用图片大小
            });

            // <img src="img/icon_19.png">
            let markerContent = `
                            <div class="map-item__base" id='mark${
                              item.pointId
                            }'>
                            <div class="arrowBox">
                            <img src="${bgtTM}">
                            </div>
                            <div style="height:50px"><i class="fontfamily ali-icon-dingweisvg" style="color:${
                              item.color
                            }"></i></div>
                            <div class="pointBox"> <img src="${
                              item.pointUrl ? item.pointUrl : pointUrls
                            }"></div>
                            </div>
                            `;

            let labelContent = `<div class='pointName'><div class="pointTxt">${
              item.pointName ? item.pointName : "张家口站点"
            }</div></div>`;
            // 将 Icon 传入 marker
            let labelOffset = new AMap.Pixel(0, -5);
            //                 将 Icon 传入 marker
            this.marker = new AMap.Marker({
              map: this.map,
              position: new AMap.LngLat(pointsArr[0], pointsArr[1]),
              icon: icon,
              anchor: "top-center", //设置锚点
              label: {
                direction: "top",
                content: labelContent,
                offset: labelOffset,
              },
              // 将 html 传给 content
              content: markerContent,
            });

            markers.push(this.marker);
            // 给点添加点击事件
            this.marker.on("click", this.clickMark);
            //           this.marker.emit("click", { target: this.marker });
          }
        }
      }

      // 绘制轨迹
      this.drawPolyline();
    },
    // 打开信息窗体
    clickMark(e) {
      let title = "张家口";
      this.getRowClass(title); // 修改表格rowclass
      //实例化信息窗体
      let content = [];
      content.push(
        `<ul class="meddil_val">
          <li>
            <div class="title_info">出水总磷:</div>
            <div class="title_value">${this.infoData.cszl}<span class="unit">mg/L</span>
            </div>
          </li>
          <li>
            <div class="title_info">出水总氮:</div>
            <div class="title_value">${this.infoData.cstz}<span class="unit">mg/L</span>
            </div>
          </li>
          <li>
            <div class="title_info">出水COD:</div>
            <div class="title_value">${this.infoData.CScod}<span class="unit">mg/L</span>
            </div>
          </li>
          <li>
            <div class="title_info">出水氨氮:</div>
            <div class="title_value">${this.infoData.csad}<span class="unit">mg/L</span>
            </div>
          </li>
          <li>
            <div class="title_info">出水PH:</div>
            <div class="title_value">${this.infoData.csph}<span class="unit">mg/L</span>
            </div>
          </li>
        </ul>`
      );

      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45),
      });
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    //构建自定义信息窗体
    createInfoWindow(title, content) {
      let info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      info.style.width = "400px";
      // 定义顶部标题
      let top = document.createElement("div");
      let titleD = document.createElement("div");
      let closeX = document.createElement("div");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.innerHTML = "<i class='el-icon-close'></i>";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      let middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "white";
      middle.innerHTML = content;
      info.appendChild(middle);

      return info;
    },

    //关闭信息窗体
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
    // 绘制轨迹
    drawPolyline() {
      let polyline = new AMap.Polyline({
        map: this.map,
        path: this.positions,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });

      let passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色
        strokeWeight: 5, //线宽
      });
    }, 

然后可以自定义样式

<style lang="scss" scoped>
/deep/.amap-icon {
  font-size: 34px;
  background: rgb(71, 63, 63);
}
/deep/ .amap-marker-label {
  top: 20px !important;
  border: 0;
  background: transparent;

  .pointTxt {
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
    margin-left: 14px;
  }
}
/deep/.amap-marker {
  position: relative;
  height: 50px;
  .map-item__base {
    position: absolute;
    z-index: 9852432;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    top: -27px;
    left: -14px;
  }
  .arrowBox {
    position: absolute;
    height: 50px;
    top: -1px;
    left: 1px;
    img {
      position: absolute;
      height: 50px;
    }
  }
  .fontfamily {
    position: absolute;
    left: 5px;
    top: 4px;
    font-size: 34px;
  }
  .pointBox {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      display: inline-block;
      width: 16px;
    }
  }
}
</style>