Vue2- 리플릿 마커가 표시되지 않음

Question

<template>
  <l-map
    style='height: 500px'
    :center='center'
    :zoom='zoom'
  >
    <l-tile-layer
      :url='url'
      :attribution='attribution'
    >
      <l-marker :lat-lng="test">
        <l-tooltip :options="{ permanent: true, interactive: true }">
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-tile-layer>
  </l-map>
</template>

<script>
import L from 'leaflet';
import {
  LMap, LTileLayer, LMarker, LTooltip,
} from 'vue2-leaflet';

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

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      center: L.latLng(47.41322, -1.219482),
      test: L.latLng(47.41322, -1.219482),
      zoom: 12,
      userLocation: false,
      userCoords: false,
    };
  },
  mounted() {
    if (!('geolocation' in navigator)) {
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        this.userCoords = L.latLng(pos.coords.latitude, pos.coords.longitude);
        this.userLocation = true;
        this.center = this.userCoords;
      },
      (err) => {
        console.log(err);
      },
    );
  },
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LTooltip,
  },
};
</script>

내 코드는 현재 마커와 도구 설명이 전혀 표시되지 않습니다. 콘솔에 오류가 표시되지 않고 어떻게해야할지 모르겠습니다.

문서에 따르면 마커가 표시되지 않는 문제가 있지만 내가 읽은 다른 문제에서 마커가 보이지 않고 마커가 보이지 않으면 팝업 / 툴팁이 계속 표시됩니다. 나는 아무것도 얻지 못하고 코드 문제를 볼 수 없습니다.

사용자 지정 마커 이미지를 사용해 보았지만 동일한 결과를 제공합니다. 아무것도

Answer 1

Marker 구성 요소는 Vue2-Leaflet의 예에서 볼 수 있듯이 Tile Layer의 하위 요소가 아니라 Map (또는 Layer Group)의 하위 요소입니다.

https://vue2-leaflet.netlify.app/examples/simple.html

    <l-map
      :zoom="zoom"
      :center="center"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker :lat-lng="withTooltip">
        <l-tooltip>
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-map>