wpt的传单更改标记答案

【问题标题】：Leaflet change marker for wptwpt的传单更改标记
【发布时间】：2020-08-06 21:30:45
【问题描述】：

我有一个使用 Leaflet 的 html 页面，我通过 a.gpx 文件导入数据。我想知道是否可以修改 <wpt> 标签的城市标记以具有图标。这是我目前拥有的：

编辑： @ghybs

您如何读取 .gpx 文件并从中创建传单图层？

        var map = L.map('map');
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
        }).addTo(map);

        var gpx = 'http://127.0.0.1:5500/resultat.gpx'; 

         new L.GPX(gpxFile, {
            async: true,
            marker_options: {
            wptIconUrls: {
              '': '/Leaflet/marker-icon.png',
             },
            startIconUrl: '/Leaflet/start.png',
            endIconUrl: '/Leaflet/start.png',
            shadowUrl: '/Leaflet/pin-shadow.png'
          }
        }).on('loaded', function (e) {
          let gpx = e.target;
          map.fitBounds(gpx.getBounds());
        }).addTo(map);

我编辑了代码和图片，图标可见，但开始/结束图标位于航点图标下方。我没有找到只有start.png的方法。

【问题讨论】：

如何读取 .gpx 文件并从中创建 Leaflet 图层？
@ghybs 我编辑了我的帖子来回答你的问题。
您是否尝试过leaflet-gpx 插件文档中针对航点图标提出的建议？ github.com/mpetazzoni/leaflet-gpx/blob/master/…
@ghybs 不，我明天试试这个。谢谢你的链接。
@ghybs 我几乎成功了，只是它们重叠的图标有问题。我编辑了代码，不知道是需要发新帖还是直接编辑。

标签： javascript leaflet gpx

【解决方案1】：

只需使用wptIconUrls: false，航点图标将不会显示和重叠。

【讨论】：

虽然这在视觉上有效（并且可能会提高性能），但控制台可能会显示每个航点的通知，因为没有图标可以匹配。例如：No waypoint icon could be matched for …等