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

Question

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

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

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

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

)marker-icon-2x.png

我最终得到了一个正确的 base64 编码图像。所以我想问题是在 URL 末尾添加了那个标记图标。

更多背景：

• 我的代码看起来像这样：

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')
});

Answer 1

为 l-marker 的“icon”属性提供一些默认值，如下所示为我解决了这个问题。尽管如此，它始终需要一个默认的有效图像路径，这意味着我们必须至少有一个可用的图像或其有效 URL。顺便说一句，下面提到的 L 对象是从“leaflet”包导入的。

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