Le marqueur Vue2-leaflet ne s'affiche pas
<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: '© <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>
Voici mon code, pour le moment le marqueur et l'info-bulle ne s'affichent pas du tout. La console n'affiche aucune erreur et je ne sais pas quoi faire.
Selon la documentation, il y a un problème avec les marqueurs qui ne s'affichent pas, mais d'après les autres problèmes que j'ai lus, il semble que le marqueur est invisible et que la fenêtre contextuelle / info-bulle s'affiche toujours si le marqueur est invisible. Je n'obtiens rien et je ne vois aucun problème avec le code.
J'ai également essayé d'utiliser une image de marqueur personnalisée mais cela donne le même résultat. Rien
Réponses
Le composant Marker n'est pas censé être un enfant du Tile Layer, comme le montrent les exemples de Vue2-Leaflet, mais un enfant de la Map (ou d'un 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>