七、vue项目使用高德地图自定义marker图标

效果如图

主要代码

data() {
    return {
      marker: "",
      markers: [
        {
          position: [118.791545, 31.9624],
          id: 1,
          icon: require("../assets/xc/ren.png"),
        },
        {
          position: [118.798832, 31.963916],
          id: 2,
          icon: require("../assets/xc/ren1.png"),
        },
        {
          position: [118.807671, 31.959403],
          id: 3,
          icon: require("../assets/xc/ren2.png"),
        },
        {
          position: [118.790131, 31.969258],
          id: 4,
          icon: require("../assets/xc/ren3.png"),
        },
      ],
    };
  },
  mounted() {
    this.xcc();
  },
  //多个自定义的marker点
    xcc() {
      this.markers.forEach((item) => {
        this.marker = new AMap.Marker({
          icon: item.icon,
          position: item.position,
          offset: new AMap.Pixel(-13, -30),
        });
        this.marker.setMap(this.map);
      });
    },