Vue2-Faltblattmarker wird nicht angezeigt

Nov 25 2020
<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>

Hier ist mein Code, im Moment werden der Marker und der Tooltip überhaupt nicht angezeigt. Die Konsole zeigt keine Fehler an und ich weiß nicht, was ich tun soll.

Laut den Dokumenten gibt es ein Problem mit Markierungen, die nicht angezeigt werden, aber von den anderen Problemen, die ich gelesen habe, scheint es, dass die Markierung unsichtbar ist und das Popup / Tooltip weiterhin angezeigt wird, wenn die Markierung unsichtbar ist. Ich bekomme nur nichts und kann kein Problem mit dem Code sehen.

Ich habe auch versucht, ein benutzerdefiniertes Markierungsbild zu verwenden, aber das ergibt das gleiche Ergebnis. Nichts

Antworten

1 ghybs Nov 26 2020 at 00:14

Die Markierungskomponente soll kein untergeordnetes Element der Kachelebene sein, wie in den Beispielen von Vue2-Leaflet gezeigt, sondern ein untergeordnetes Element der Karte (oder einer Ebenengruppe):

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>