El marcador de folletos Vue2 no se muestra

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>

Aquí está mi código, en este momento el marcador y la información sobre herramientas no se muestran en absoluto. La consola no muestra errores y no sé qué hacer.

De acuerdo con los documentos, hay un problema con los marcadores que no se muestran, pero por los otros problemas que he leído, parece que el marcador es invisible y la ventana emergente / información sobre herramientas aún se mostrará si el marcador es invisible. No obtengo nada y no veo un problema con el código.

También intenté usar una imagen de marcador personalizada, pero da el mismo resultado. Nada

Answer 1

Se supone que el componente Marker no es un elemento secundario de la capa de mosaico, como se muestra en los ejemplos de Vue2-Leaflet, sino un elemento secundario del mapa (o de un grupo de capas):

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>