未找到传单标记生产环境角度 7 [关闭]答案

【问题标题】：Leaflet Marker not found production env angular 7 [closed]未找到传单标记生产环境角度 7 [关闭]
【发布时间】：2019-06-02 01:01:27
【问题描述】：

我在 Angular 项目中使用传单地图。
使用传单显示带有标记的地图。
这在 ng server 和 ng build 中正常工作。
但是在构建中使用 --prod 时不会显示标记图标。
标记图像路径错误。

 http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png

如何解决这个问题？

【问题讨论】：

复制：stackoverflow.com/questions/41144319/…

标签： angular leaflet

【解决方案1】：

您肯定有不同的 Angular 配置用于生产构建，它会识别 CSS 中使用的资源。很有可能这是默认的 Angular 配置。

在这种情况下，您遇到了 Leaflet 与修改资源 URL 的 webpack（它是 Angular CLI 底层的构建引擎）的兼容性错误，如 Leaflet issue #4698 中所述。

您的案例有 2 个简单的解决方案：

使用leaflet-defaulticon-compatibility plugin（我是作者）。只需在 Leaflet 之后导入插件 CSS 和 JS。

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

明确指定默认图标图片资源，让Leaflet不再需要URL猜测，不再被webpack的URL重写搞砸：

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

【讨论】：