javascript - 传单:如何模拟鼠标点击？ fireevent ('click' ) 不触发弹出窗口

Question

我想用 leaflet 在 javascript 中模拟鼠标点击。

我有一张包含几个不同图层的 map 。一些激活弹出窗口。当我用鼠标单击某个项目时，会出现一个弹出窗口。

当我尝试执行以下代码时，它似乎在所需位置“单击”但没有出现弹出窗口。

map.fireEvent('click', {
    latlng: L.latLng(lat, lng)
});

Answer 1

只有当图层接收到点击事件时，您的图层的弹出窗 Eloquent 会打开。

当你做 map.fire('click') ，只有 map 会收到事件， map 上的图层不会收到事件，即使它们位于您指定的纬度/经度位置也是如此。

为了找到指定的 Lat/Lng 位置的图层，您可以使用例如 leaflet-pip插件(多边形中的点):

var map = L.map('map').setView([48.86, 2.35], 11);

var geoJSONdata = {
  type: 'Feature',
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [2.3, 48.85],
        [2.3, 48.87],
        [2.4, 48.87],
        [2.4, 48.85],
        [2.3, 48.85]
      ]
    ]
  }
}

var geoJsonLayerGroup = L.geoJSON(geoJSONdata, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup('Popup')
  }
}).addTo(map);

document.getElementById('pipClick').addEventListener('click', function() {
  var latlng = L.latLng([48.86, 2.35]);
  // Use Mapbox Leaflet PIP (point in polygon) library.
  var foundLayers = leafletPip.pointInLayer(latlng, geoJsonLayerGroup);

  foundLayers.forEach(function(layer) {
    layer.fire('click', {
      latlng: latlng
    });
  });
});

document.getElementById('mapClick').addEventListener('click', function() {
  map.fire('click', {
    latlng: L.latLng([48.86, 2.35])
  });
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-pip@1.1.0/leaflet-pip.js"></script>

<button id="mapClick">Click on Map</button>
<button id="pipClick">Find layers with PIP and click them</button>
<div id="map" style="height: 170px"></div>