>

각도 프로젝트에서 전단지 맵을 사용하고 있습니다.
전단지를 사용하여 마커가있는지도를 표시합니다.
이것은 ng server 및 ng build에서 올바르게 작동합니다.
빌드에서 --prod를 사용하면 마커 아이콘이 표시되지 않습니다.
마커 이미지 경로가 잘못되었습니다.

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

이 문제를 해결하는 방법?

  • 답변 # 1

    CSS에서 사용되는 리소스를 핑거 프린팅하는 프로덕션 빌드를위한 다른 Angular 구성이 있어야합니다. 기본 각도 구성 인 가능성이 높습니다.

    이 경우 Leaflet Issue # 4698에 설명 된대로 리소스 URL을 수정하는 webpack (Angular CLI에서 빌드 엔진 인)과 함께 Leaflet의 호환성 버그가 발생했습니다.

    귀하의 사례를위한 2 가지 쉬운 솔루션이 있습니다 :

    리플릿 기본 아이콘 호환 플러그인을 사용합니다 (저는 저자입니다). 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 추측이 필요하지 않으며 더 이상 웹팩의 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'),
    });
    
    

  • 이전 firebase - Firestore에서 Collection Group Queries를 사용하는 다중 테넌트 앱에 대한 모범 사례는 무엇입니까?
  • 다음 android - 기본 목록보기를 스크롤 할 수 없음