현상

npm으로 설치 한 leaflet으로지도를 표시하려고하면
맵은 표시되지만 마커는 표시되지 않습니다.

<template>
  <div class="folium-map" id="mymap"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";

export default {
  mounted() {
    var mymap = L.map("mymap").setView([35.65809922, 139.74135747], 10);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>',
      maxZoom: 18
    }).addTo(mymap);

    L.marker([35.710143, 139.810708], { title: "スカイツリー" }).addTo(mymap);
    L.marker([35.658772, 139.745422], { title: "東京タワー" }).addTo(mymap);
  }
};
</script>

<style>
html,
body {
  width: 600px;
  height: 600px;
  margin: 0;
  padding: 0;
}

#mymap {
  position: relative;
  width: 100%;
  height: 600px;
  left: 0%;
  top: 0%;
}
</style>

개발자 도구의 오류

이미지를 찾을 수없는 것 같습니다.

해결 방법

알려진 Leaflet 버그 패턴.
Leaflet 내부의 icon 경로가 올바르게 로드되지 않았습니다.
몇가지 대응 방법은 있지만, 기본적으로 images의 패스를 재정의해 주면 된다.
주의점으로서는, iconUrl등의 Url만 재정의해 버리면, Anchor의 위치가 미쳐 버린다
확대 축소했을 때에 마커의 위치가 어긋나 버리므로, Anchor등도 포함해 재정의.

import icon from "leaflet/dist/images/marker-icon.png";
import iconRetina from "leaflet/dist/images/marker-icon-2x.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

    let DefaultIcon = L.icon({
      iconUrl: icon,
      iconRetinaUrl: iconRetina,
      shadowUrl: iconShadow,
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      tooltipAnchor: [16, -28],
      shadowSize: [41, 41]
    });
    L.Marker.prototype.options.icon = DefaultIcon;

조치 후 결과

<template>
  <div class="folium-map" id="mymap"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
// 追加
import icon from "leaflet/dist/images/marker-icon.png";
import iconRetina from "leaflet/dist/images/marker-icon-2x.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

export default {
  mounted() {
    var mymap = L.map("mymap").setView([35.65809922, 139.74135747], 10);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>',
      maxZoom: 18
    }).addTo(mymap);

    // 追加
    let DefaultIcon = L.icon({
      iconUrl: icon,
      iconRetinaUrl: iconRetina,
      shadowUrl: iconShadow,
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      tooltipAnchor: [16, -28],
      shadowSize: [41, 41]
    });
    L.Marker.prototype.options.icon = DefaultIcon;

    L.marker([35.710143, 139.810708], { title: "スカイツリー" }).addTo(mymap);
    L.marker([35.658772, 139.745422], { title: "東京タワー" }).addTo(mymap);
  }
};
</script>

<style>
html,
body {
  width: 600px;
  height: 600px;
  margin: 0;
  padding: 0;
}

#mymap {
  position: relative;
  width: 100%;
  height: 600px;
  left: 0%;
  top: 0%;
}
</style>

참고

javascript - Leaflet Marker not found production env - Stack Overflow
L.Icon.Default brings a wrong image url · Issue #4968 · Leaflet/Leaflet