Question

我的传单有问题。

开发过程中一切正常，但在制作中，我的应用无法找到marker-icon.png和marker-shadow.png图片。

正在寻找路径assets/station/images/marker-icon.png

Leaflet js在我的html.erb文件中包含这样的内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />

如果有人可以提供帮助！

Answer 1

这是Leaflet中的一个已知错误，根本原因是在捆绑过程中错误引用了Leaflet的图标图像位置。

您可以购买运行时验证此参数的方法来验证这是您的问题：L.Icon.Default.prototype._getIconUrl()。
正确的值应为<some_directory>/leaflet/dist/images/。
但是，如果您遇到此错误，则其值为：data:image/png;base64,iVBO....K5CYII=")undefined

根据所使用的捆绑程序加载器（Vanila WebPack，Angular-Cli-WebPack的超集等），有不同的解决方案（变通方法）。

您可以在此处看到原始问题（以及根据带式装载机的不同解决方案）：
https://github.com/Leaflet/Leaflet/issues/4968

如果您使用的是Angular-Cli，则此功能将为您工作。在设置Maker之前，将此代码添加到某些软件中

import { icon, Marker } from 'leaflet';
const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

（此代码会将损坏的标记的网址更改为资产文件夹中的有效图像）。

然后将此代码添加到您的angular.json（对于Angular版本== 6.x）或您的angular-cli.json（对于Angular版本<= 5.x）：

"assets":
[
   "src/favicon.ico",
   "src/assets",
   {
      "glob": "**/*",
      "input": "node_modules/leaflet/dist/images/", // you may need to change this path, according to your files structure
      "output": "./assets/"
   }
] ...

（此代码会将原始“标记”图像复制到/assets文件夹中，以便angular-cli可以加载它们）

Answer 2

以下代码对我有用

delete L.Icon.Default.prototype._getIconUrl;
L.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 3

在Angular 10中工作

对我来说，将PNG文件复制粘贴到资产和一个命令中

ngOnInit() { L.Icon.Default.ImagePath = "assests/leaflet/" }

Answer 4

也许尝试升级到当前版本的传单 - 我从未在标记图标上遇到过这个问题。

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js

Answer 5

我遇到了一个类似的问题，使用Parcel作为捆绑器与TypeScript和Leaflet v1.4（通过npm安装，以及其类型）结合使用并解决了它用吉尔的答案稍有不同。

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L, {
  LatLngExpression,
  FeatureGroup,
  TileLayerOptions,
  LayerEvent,
  LeafletMouseEvent,
  Marker,
  Layer,
  icon,
  LayerGroup,
  GeoJSON
} from 'leaflet';
import 'leaflet-draw';
import iconRetinaUrl from './assets/marker-icon-2x.png';
import iconUrl from './assets/marker-icon.png';
import shadowUrl from './assets/marker-shadow.png';

// Assign the imported image assets before you do anything with Leaflet.
Marker.prototype.options.icon = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41],
});

在另一个文件中，我添加了必需的声明，因此TypeScript允许我导入png图像，例如

declare module "*.png" {
  const content: string;
  export default content;
}

还要注意，如果您使用需要访问这些图像的Leaflet插件，则可能还需要显式分配它，例如Leaflet绘图插件也需要它。示例：

        map.addLayer(drawLayer);
        const drawControl = new L.Control.Draw({
          draw: {
            circle: false,
            circlemarker: false,
            marker: {
              icon: Marker.prototype.options.icon, // Assign icon explicitly
            },
          },
          edit: {
            featureGroup: drawLayer,
          },
        });
        map.addControl(drawControl);
        map.on(L.Draw.Event.CREATED, event => {
          const layer = (event as LayerEvent).layer;
          drawLayer.addLayer(layer);
        });

Answer 6

import "leaflet/dist/images/marker-shadow.png";

如果使用webpack，只需导入图像

Answer 7

@GilEpshtain的答案在Angular 9.1.9上对我有用。

附加说明-为调试起见，通过将图标URL之一直接放入浏览器，您应该能够确认@GilEpshtain指定的对angular.json#assets的更改已生效。例如http://localhost:4200/assets/marker-icon.png应该显示标记图标。

Answer 8

您可以在传单css中更改图标的当前路径。所以不要用url Leaflet.css，下载文件改一下。

.leaflet-default-icon-path {
    background-image: url(https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png);
}

Answer 9

答案是用传单css更新你的index.html

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBdNfgdfTC5n17Xddt2atTPudf34rdf45erfggrrddfdffdfEdf1HxjVMSvLVW9odfdfcdfdf3rfddfdferdfdfqdfgdfUKLsCC5gdfdfdCXdbqCmblFFAshOdfdfMAS6/kddderfdfeqq/sMZMZ19scRerdfggdfddffd4PsZChyertfgRRRSR7A=="
   crossorigin=""/>

将css放在header中

Leaflet Marker未找到生产环境

9 个答案: