由于 ERR_INVALID_URL 错误，Leaflet JS 中的标记无法正确加载

Question

我正在尝试向我的Leaflet地图添加标记，但它们没有显示出来。

在控制台中，我看到一个网络错误：net::ERR_INVALID_URL，用于加载像这样的图片的http请求：

Request URL: data:image/png;base64,iVBORw0KGgoAA.....SUVORK5CYII=")marker-icon-2x.png

如果我删除URL的最后一部分

)marker-icon-2x.png

我最终得到了一个合适的base64编码图像。因此，我猜测问题是在URL的末尾添加了那个marker-icon标记是什么。

更多背景信息：

我的代码大致如下：

L.marker(coords).bindPopup(someName).addTo(this.map)

• 我的地图正确渲染，可以在上面绘制多边形等。

• 我使用Vue和Vue2Leaflet。

• 我已经导入了leaflet.css。

• 我尝试包含以下代码行，但没有效果：

delete Icon.Default.prototype._getIconUrl

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

- Nikola Schou

---

如果您解决了这个问题，我们将非常感激您的解决方案！ - Mike Davlantes

有关根本原因和几种可能的解决方案，请参见https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-483402699。 - ghybs

Answer 1

这个可以工作：

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});

- Displee

Answer 2

提供以下默认值给l-marker的'icon'属性，解决了我的问题。不过，它仍然需要一个默认的有效图像路径，这意味着我们必须至少有一张图片或其有效的URL可用。 顺便说一下，下面提到的L对象是从'leaflet'包中导入的。

defaultIcon = L.icon({
        iconUrl: require('../assets/logo.png'),
        shadowUrl: require('../assets/logo.png'),
    });

- Yogesh Vadekar