第一步：初始化地图

// 初始化地图
    initMap(){
      this.map = L.map('map1').setView([39.9, 116.4], 18)

      L.tileLayer('https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}', {
      }).addTo(this.map)
      // this.marker_group = L.layerGroup([])  //图层组
    },

第二步：添加标记点

          let pointList = []
          let markerLayer = []
// 在地图上增加有图片的标记点
          let myIcon = L.icon({
              iconUrl: require("./green.png"),
              iconSize: [20, 25],
            })
//this.guijiPicList[i].lat, this.guijiPicList[i].lon（经纬度）
          let markerPic = L.marker([this.guijiPicList[i].lat, this.guijiPicList[i].lon],{icon:myIcon})
          markerLayer.push(markerPic)
          let polyline = L.polyline(pointList, {color: 'red'}).addTo(this.map)
          markerLayer.push(polyline)
          this.map.fitBounds(polyline.getBounds()) // zoom the map to the polyline
          // 给出标记箭头（箭头的polylineDecorator是另外安装的依赖包，原官网没有这个方法）
          let arrow = L.polylineDecorator(polyline, {
            patterns: [
              {
                offset: 30,
                repeat: 60,
                symbol: L.Symbol.arrowHead({
                  pixelSize: 4,
                  pathOptions: { color: "#000", weight: 2, stroke: true },
                }),
              },
            ],
          }).addTo(this.map)
          markerLayer.push(arrow)
          this.marker_group = L.layerGroup(markerLayer)
          this.map.addLayer(this.marker_group)

   //设置弹出窗口被打开的地理位置[op.lat, op.lon]表示经纬度
    L.popup({ maxWidth: 800, maxHeight: 600 })
              .setLatLng([op.lat, op.lon]) 
              .setContent(`<img src=${res} style="width: 384px;height: 256px;">`).openOn(this.map)

清除地图标记组

if(this.marker_group){
        this.marker_group.clearLayers()
      }

官网链接：https://leafletjs.cn/