Je suis nouveau sur Leaflet et j’ai une erreur quand j’affiche des polylines sous IE 11.
Ma page est très simple et fonctionne sur Chrome et FireFox. Je dessine juste un point et une polyline.
Tout va bien quand je dessine juste un marqueur mais lorsque j’ajoute une polyligne, sur IE, la navigation se passe très bien tant que la carte de l’écran n’atteint pas la polyline (niveau de zoom élevé). Dès que je fais un zoom arrière pour voir la polyline, IE11 se fige.
Une erreur est générée dans le script https://unpkg.com/leaflet@1.6.0/dist/leaflet.js (5,61705): [Impossible d’obtenir la propriété "x" d’une référence nulle ou non définie] sur la fonction :
// return closest point on segment or distance to that point
function _sqClosestPointOnSegment(p, p1, p2, sqDist) {
var x = p1.x, // L'erreur se produit ici
y = p1.y,
dx = p2.x - x,
dy = p2.y - y,
dot = dx * dx + dy * dy,
t;
if (dot > 0) {
t = ((p.x - x) * dx + (p.y - y) * dy) / dot;
if (t > 1) {
x = p2.x;
y = p2.y;
} else if (t > 0) {
x += dx * t;
y += dy * t;
}
}
dx = p.x - x;
dy = p.y - y;
return sqDist ? dx * dx + dy * dy : new Point(x, y);
}
Mon code est:
function init() {
var Produit4 = {
lat: 52,
lon: 0,
};
var ZoomLevel = 7;
var mymap = L.map("mapid").setView([Produit4.lat, Produit4.lon], ZoomLevel);
var MainLayer = L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=sk.eyJ1IjoiYnJ1bm9nYXJuaWVyIiwiYSI6ImNrYmFzam9hdzA5OW0ycnB2Z2JxeXEwYmcifQ.m0w2z_IIm_M2JdO0W7mJBA",
{
attribution:
"Map data © OpenStreetMap contributors, " +
"CC-BY-SA, " +
"Imagery © Mapbox",
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
);
L.Browser.touch = false;
MainLayer.addTo(mymap);
var rectangle = L.polyline([
[46, -16],
[62.75, -16],
[62.75, 13],
[46, 13],
]).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(mymap);
}
Si jamais vous aviez besoin des autres fichiers, voici un codepen : https://codepen.io/bruno-garnier/pen/abdNXjR
Merci d’avance ! Bruno.
