我在角度项目中使用传单地图。
使用传单显示带有标记的地图。
可以在ng服务器和ng build中正常工作。
但是在构建中使用--prod时不显示标记图标。
标记图像路径错误。
http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png
如何解决此问题?
答案 0 :(得分:0)
您肯定会为生产构建使用不同的Angular配置,该配置会识别CSS中使用的资源。很有可能是默认的Angular配置。
在这种情况下,您遇到的是Leaflet与webpack的兼容性错误(这是Angular CLI的构建引擎),它会修改资源URL,如Leaflet issue #4698中所述。
您有2种简单的解决方案:
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';
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'),
});