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

Question

我正在尝试向我的传单 map 添加标记，但它们没有出现。

在控制台中，我看到一个网络错误: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)

我的 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

这有效:

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