仅在单击时选择对象中的最后一个值

Question

在单击时会放大到足迹的动态地图上工作。问题是无论我单击哪个功能，总会在循环中的最后一个键最后一个功能上结束。对我想念的东西有什么想法吗？控制台日志记录看起来不错，现在会引发错误。预先感谢。

[geoJson中的一个记录-var FeaturedTrails = {“ type”：“ FeatureCollection”，“ name”：“ OneTamFeaturedTrails”，“ crs”：{“ type”：“ name”，“ properties”：{“ name”：“ urn：ogc：def：crs：OGC：1.3：CRS84”}}，“特征”： [{“ type”：“功能”，“ properties”：{“ trailName”：“西峰环路”}，“ geometry”：{“ type”：“ MultiLineString”，“ coordinates”：[[[-122.61021，37.91201] ，[-122.6103、37.91196]，[-122.61032、37.91195]，[-122.61034、37.91195]，[-122.61037、37.91194]，[-122.61044、37.91194]，[-122.61049、37.91194]，[-122.61051、37.91194]， [-122.61056，37.91191]，[-122.61058，37.91191]，[-122.6106，37.91191]，[-122.61066，37.9119]，[-122.61069，37.9119]，[-122.61072，37.91189]，[-122.61076，37.91186]，[ -122.61101，37.91191]，[-122.61116，37.91202] []}}，

    var trailProps = {
      "West Peak Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
       // stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
      },
      "Redwood Creek Trail Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
        //stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
    },
      "Mountain Home Inn Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
        //stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
    }
  };

    // Create empty object to contain geoJSON objects of trails
    var trailsGeoJSON = {}

  // Loop through properties and assign them to the trails
  for (trail in trailProps) {


    // assign variable of the empty object with [trail] array
    trailsGeoJSON[trail] = L.geoJson(featuredTrails, {
      // is point to layer ok for use on polylines?
      pointToLayer: function(feature, latLngs){
        return L.polyline (feature, latLngs);
      },
      filter: function(feature) {
        // Test for equivalence, then return feature
        if (feature.properties.trailName == trail)
              return feature
      },
      style: function(feature) {
        if (feature.properties.trailName == trail)
              return {"color": trailProps[trail].color}

      }, 
      onEachFeature: function(feature, layer) {
        if (feature.properties.trailName == trail) {
         // layer.bindPopup(trailProps[trail].stats)
        }

      }
      }).addTo(map); 
  }
  // loop through the geoJSONs and add event when clicked
  for (trail in trailsGeoJSON) {

    trailsGeoJSON[trail].on("click", function(e){
      map.fitBounds(trailsGeoJSON[trail].getBounds()) 
      var div = document.getElementById("info")
      div.style.display= "inherit"
      // use the trailsProp object to populate info
      div.innerHTML = trailProps[trail].info
    })
  }```

Answer 1

类似于Leaflet OnClick data not dynamically，您可能只需要确保trail循环中的for变量在每次循环迭代中都处于块范围内]：>

for (const trail in trailsGeoJSON) {
  // etc.
}