Question

为什么我没有单击Leaflet层时为何打印此控制台？在我阅读本文时，单击点图层时，函数onClick会触发并登录到控制台。但是控制台登录页面刷新。 billboardLayer和bannerLayer都是JS对象。

html：

<body>

  <div id='map'></div>
  <div id='footer'>
    <div><img src="\data\images\SC811new2.png" class="footer-img">
        <h1>Average Rent in Every US County</h1>
    </div>
    <p id='imageTest'></p>
</div>

JS：

var js_files = {
      billboardLayer: {
        source: billboardLocations,
        color: '#1f78b4'
      },
      bannerLayer: {
        source: bannerLocations,
        color: '#ff2700'
      }
    };
    var geojsonLayers = {};
    for (file in js_files) {
      //console.log(js_files[file].source)
      //console.log(js_files[file].color)
      geojsonLayers[file] = L.geoJson(js_files[file].source, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng)//.on('click', onClick);
        },
        style: function (feature) {
          return {
            fillColor: js_files[file].color,
            weight: 0,
            fillOpacity: 0.75,
            radius: 10
          }
        },
         onEachFeature: function(feature, layer) {
           var images = layer.feature.properties.imageFile;
           //console.log(images);
           layer.on('click', onClick(images));
         }
      }).addTo(map);
    }
function onClick(images) {
        console.log(images);
        //var x = document.getElementById('imageTest');
        //x.innerHTML = '<img src="data/images/LCWASD -Lancaster 2.jpg"/>';
        //console.log(x)
        //<img src="\data\images\LCWASD -Lancaster.jpg" id="imageTest">
        //"<img src='something' onmouseover='change(\"ex1\")' />"
      };
  </script>

</body>

Answer 1

通过调用onClick(images)，您正在调用该函数。您只需要传递参考即可。例如。 onClick.bind(this, images)，因此应该为layer.on('click', onClick.bind(this, images));

由于它只是您要传递的引用，因此在执行点击处理程序的回调（即单击时）之前，它不会被调用

在点击之前触发“点击”

1 个答案: