Leaflet.js 循環點擊事件處理程序

Question

我正在嘗試獲取一個圈子點擊事件來更新“名稱”ID，但是一旦我點擊其中一個圈子，就無法讓網站更改“名稱”變量。 我收到的錯誤是“Uncaught TypeError: Cannot read property '3' of undefined”，來自這一行：var name = e.sites[i].names;

 // Define variables for our base layers var streetmap = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>", maxZoom: 18, id: "mapbox.streets", accessToken: "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" }); // satellite map background tile layer var satellitemap = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>", maxZoom: 15, id: "mapbox.satellite", accessToken: "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" }); var darkmap = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>", maxZoom: 18, id: "mapbox.dark", accessToken: "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" }); // Initialize all of the LayerGroups to be used var layers = { CREEK_SITES: new L.LayerGroup() }; // Create the map with layers var map = L.map("map", { center: [44.953457, -93.502959], zoom: 11, layers: [ layers.CREEK_SITES ] }); // Add 'darkmap' tile layer to the map as default darkmap.addTo(map); // Create an overlay object var overlayMaps = { "Stream Level": layers.CREEK_SITES }; var baseMaps = { "Street Map": streetmap, "Dark Map": darkmap }; L.control.layers(baseMaps, overlayMaps).addTo(map); // CREEK SITES LAYER // ================================================================================================= var sites = [{ names: "CPA01", location: [44.964088, -93.672554], subwatershed: "Painters Creek" }, { names: "CMH04", location: [44.901323, -93.332248], subwatershed: "Minnehaha Creek" }, { names: "CMH24", location: [44.915574, -93.242167], subwatershed: "Minnehaha Creek" } ]; //Change the size and color of circular markers here for (var i = 0; i < sites.length; i++) { circle = new L.circle(sites[i].location, 200, { fillOpacity: 0.8, color: "orange", fillColor: "blue" }).addTo(layers.CREEK_SITES).on("click", circleClick); function circleClick(e) { var name = e.sites[i].names; return document.getElementById('name').innerHTML=name; } } var sites = [{ names: "CPA01", location: [44.964088, -93.672554], subwatershed: "Painters Creek" }, { names: "CMH04", location: [44.901323, -93.332248], subwatershed: "Minnehaha Creek" }, { names: "CMH24", location: [44.915574, -93.242167], subwatershed: "Minnehaha Creek" } ]; for (var i = 0; i < sites.length; i++) { circle = new L.circle(sites[i].location, 200, { fillOpacity: 0.8, color: "orange", fillColor: "blue" }).addTo(layers.CREEK_SITES).on("click", circleClick); function circleClick(e) { var name = e.sites[i].names; return document.getElementById('name').innerHTML=name; } }

 <body> <:-- The div where we will inject our map --> <div id="info"><h1 id="name"></h1></div> <div id="map"></div> <:-- begin snippet: js hide: false console: true babel: false -->

Answer 1

這是由對 JavaScript 示波器的經典誤解引起的。

您的function circleClick被吊出您的for循環塊； a JS function scope 是父 function 塊，或全局 Z31A1FD140BE4BEF2D181E218A1。 對var相同。

因此，當您觸發點擊事件時，您的 function 會嘗試訪問e.sites ，這是未定義的，因為e是 function 參數，該值由sites提供，它對您的變量一無所知。 您可以直接使用sites 。

然后它嘗試訪問sites[i] ，其中i是for循環后留下的值，即3因為這是您的sites數組的長度。 相反，您應該簡單地將所需的值嵌入到您的層中，以便您可以通過訪問被點擊的層輕松檢索它，該層由 Leaflet 在點擊事件參數中提供： https://leafletjs.com/reference-1.6。 0.html#event-sourcetarget

function circleClick(e) {
  const name = e.sourceTarget.options.name;
  document.getElementById('name').innerHTML = name;
}

for (let i = 0; i < sites.length; i++) {
  L.circle(sites[i].location, 200, {
    name: sites[i].names, // you can add arbitrary option to embed your data
    fillOpacity: 0.8,
    color: "orange",
    fillColor: "blue"
  }).addTo(layers.CREEK_SITES).on("click", circleClick);
}

Leaflet.js 循環點擊事件處理程序

問題描述

1 個解決方案

解決方案1
0 2020-04-27 19:36:33

Leaflet.js 循環點擊事件處理程序

問題描述

1 個解決方案

解決方案1 0 2020-04-27 19:36:33

解決方案1
0 2020-04-27 19:36:33