Question

我想用小册子模拟鼠标点击。

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

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

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

Answer 1

你的图层＆＃39;只有当图层收到点击事件时，弹出窗口才会打开。

执行map.fire('click')时，只有地图才能获取事件，而不是其上的图层，即使它们位于您指定的Lat / Lng位置。

为了找到哪些图层位于指定的Lat / Lng位置，您可以使用例如leaflet-pip插件（多边形点）：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

添加到@ghybs答案： Leaflet图层有fireEvent method，您可以使用它来触发图层事件。

宣传单：如何模拟鼠标点击？ fireevent（'click'）不会触发弹出窗口

2 个答案: