leaflet.marker的提问

我想引用leaflet 的marker功能，但是在引用成功后默认的标注点的图片是裂开的，查看leaflet文件中的也显示有个叉，这是怎么一回事呢？

不知道你这个问题是否已经解决, 如果还没有解决的话:

看下这篇博客，也许你就懂了，链接：leaflet marker点击高亮

除此之外, 这篇博客: leaflet 加载海量点位，点击marker 查看详情功能中的 2.使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

我是使用的cnpm 安装的所以在项目里面直接使用import 引入

import 'leaflet-canvas-marker';

项目使用的天地图，具体使用方法可以查找案例，或者使用leaftlet 官方使用的 openstreetmap.

首先声明

let ciLayer = null;

然后在initMap 初始化地图的时候调用，通过github 里面的api 可以知道addOnClickListener 是查看点击了哪个marker 其中data可以取到定义的数据

    ciLayer = L.canvasIconLayer({}).addTo(map);
    ciLayer.addOnClickListener(function(e, data) {
      markerIconShow(data[0].data);
    
    });

接下来我们随意定义几个点位增加到地图上,其中使用再定义一个addMarker 来定义一些marker的样式大小等属性

let listIcon=[
      {id:100,locationName:"测试路",goTime:"8:41",stopTime:"1h19min",lat:36.95903,lng:118.099474},
      {id:110,locationName:"测试2",goTime:"9:41",stopTime:"1h19min",lat:36.95891,lng:118.105649},
      {id:120,locationName:"测试3",goTime:"9:41",stopTime:"1h19min",lat:36.954315,lng:118.099383},
      {id:130,locationName:"测试4",goTime:"10:41",stopTime:"1h19min",lat:36.95903,lng:118.099474}
  
  ]

 addMarker(listIcon)

addMarker方法展示

重点是 ciLayer.addLayers(_markers),将构建好的marker添加到海量点位插件里面，其中用到的 iconTemplate 就是图片地址 "xxx.png"

  //添加标注
  const addMarker = data => {
    let arr = data,
      _markers = [],
      type = markerType;
    if (map) {
      arr.forEach((elem, index) => {
        if (type === "icon") {
          let iconHtml = ``;
          iconHtml = iconTemplate(elem.type);
          let Opts = ``;
          Opts = L.divIcon({
            iconUrl: iconHtml,
            iconSize: [24, 24],
            iconAnchor: [12, 12],
            className: `${
              elem.state
                ? `device device-${index} marker-status-${elem.type} `
                : `device  marker-status-${elem.type}  unnormal `
            }`
          });
          let marker = L.marker([elem.lat, elem.lng], { icon: Opts });
          marker.data = elem;
          marker.bindTooltip(`<span>${elem.title}</span>`, {
            offset: [10, -10],
            direction: "right"
          });
          markers.push(marker);
          _markers.push(marker);
        }
      });
      ciLayer.addLayers(_markers);
    }
  };

markerIconShow方法展示

此方法主要是用于在点击了之后可以查看点击的详情，弹出框向用户展示.注意:若不是纯文本，里面有功能按钮需要使用L.popup 来绑定弹框方法，若使用bindPopup会导致弹框点击第二次点击事件无效的BUG。

其次，再L.popup里面使用addEventListener 来点击按钮要给一个setTimeout 否则会导致 'addEventListener of null'

 const markerIconShow = data => {
 
  let marker = data;
   
      ajax({
        url: "/api/task/local_detail",
        data: { type: marker.data.type, id: marker.data.id }
      }).then(res => {
        let infoTem = ``;
        infoTem = infoTemplate(res.data, marker.data.type);
        let markerCenter = [marker.data.lat, marker.data.lng];
        // marker.bindPopup(infoTem,{className:"marker-popup"}).openPopup()
        let arr = [];
        let popup = L.popup({
          className: "marker-popup"
        })
          .setLatLng(markerCenter)
          .setContent(infoTem)
          .addTo(map);
        arr.push(popup);
        map.flyTo(markerCenter, 11);
        }
        if (document.getElementById("path-click")) {
          setTimeout(() => {
            document
              .getElementById("path-click")
              .addEventListener("click", function(e) {
                let id = e.target.dataset.id,
                  type = e.target.dataset.type;
                map.closePopup();
                mapRemove(arr);
                pathOut();
                setOutStatus(false);
                pathFun(id, type);
              });
          }, 100);
        }
      });
    }
  };

至此使用海量点位插件可以实现加载大量点位，对点位的操作功能

以下回答来自chatgpt:
针对您的问题，经过研究发现可能是marker的图片加载出了问题，建议您检查一下图片的路径是否正确。
另外，您在参考资料中提到使用了海量点位插件，可以借助该插件实现加载大量标记点和对标记点的操作。具体的实现步骤如下：
1. 安装海量点位插件
可以通过以下方式安装：
```
cnpm i leaflet-canvas-marker -S
```
或者直接下载Leaflet.Canvas-Markers，在项目里面直接引入。
1. 初始化海量点位图层
可以通过以下代码初始化海量点位图层：
```
let ciLayer = L.canvasIconLayer({}).addTo(map);
```
其中，map是地图对象。该方法返回的是海量点位图层对象。
1. 添加标记点
可以通过以下代码添加标记点：
```
let marker = L.marker([lat, lng], {icon: myIcon}).addTo(ciLayer)
```
其中，lat和lng是标记点的坐标，myIcon是标记点的图标对象。
1. 修改标记点图片路径
如果您是直接使用默认的标记点图片，可以通过以下代码修改路径：
```
L.Icon.Default.imagePath = 'path/to/images';
```
其中，path/to/images是您自定义的图片路径。
1. 完整的实现代码
下面是完整的实现代码示例：
```
import 'leaflet-canvas-marker';

const map = L.map('map').setView([51.505, -0.09], 13);

let ciLayer = L.canvasIconLayer({}).addTo(map);

L.Icon.Default.imagePath = 'path/to/images';

let marker = L.marker([51.5, -0.09], {icon: L.Icon.Default}).addTo(ciLayer);
```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^