Leaflet地图js中如何防止点击多边形外部？

Question

我们有多个经纬度数组，（这里 3 个数组存储在 success_content_mapareas 中）
因此，我们创建了地图，它看起来像这样，在下图中看起来不错。

我们需要防止点击多边形之外。

var success_content_mapareas = res.area_labels;

if (success_content_mapareas != "") {
  var map = L.map("map").setView([26.250930597138844, 43.98925781250001], 5);

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

  jQuery.each(success_content_mapareas, function (index, success_content_mapareas) {
    L.polygon(success_content_mapareas).addTo(map);
  });

  function onMapClick(e) {
    var latlong_test = e.latlng;
    console.log(latlong_test);
    jQuery.get(
      "https://nominatim.openstreetmap.org/reverseformat=jsonv2&lat=" + latlong_test.lat + "&lon=" + latlong_test.lng,
      function (data) {
        console.log(data.display_name);
        jQuery("#bs_quick_shipping_full_address").val(data.display_name);
      },
    );
  }

  map.on("click", onMapClick);
}

我们用过这个，

https://unpkg.com/[email protected]/dist/leaflet.js

https://unpkg.com/[email protected]/dist/leaflet.css

我们需要防止在多边形外部点击，或警报消息，或类似的东西。
目前，我们正在获取地图中点击区域的经纬度
你可以在控制台看到。

参考。 https://leafletjs.com/

Answer 1

您可以将单击事件设置为每个多边形，而不是通过执行

map.on("click", onMapClick);

将单击事件添加到地图，

...
jQuery.each(success_content_mapareas, function (index, success_content_mapareas) {
    var poly = L.polygon(success_content_mapareas).addTo(map);
    // add click event to polygon
    poly.on("click", function (e) {
        doPolyClick(e);
    });
});

function doPolyClick(ev) {
    console.log(ev.latlng);
} 
...