jquery 如何防止在Leaflet map js中点击多边形外部？

pinkon5k 于 10个月前发布在 jQuery

关注(0)|答案(1)|浏览(81)

我们有多个lat long数组，（这里有3个数组存储在success_content_mapareas中）
因此，我们已经创建了Map，它看起来像这样，在下面的图像中看起来不错。

的数据
我们需要防止点击出多边形。

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

的数据
我们需要防止在多边形外部单击，或警告消息，或类似的东西。
目前，我们正在获取Map中点击区域的纬度
你可以在控制台上看到。
参考https://leafletjs.com/

jquery

来源：https://stackoverflow.com/questions/77583519/how-to-prevent-click-on-outside-of-polygons-in-leaflet-map-js

1条答案

按热度按时间

ux6nzvsh1#

而不是通过执行map.on("click", onMapClick);将点击事件添加到Map，您可以将点击事件设置为每个多边形，

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

字符串

赞(0）回复(0）举报 10个月前

我来回答

jquery 如何防止在Leaflet map js中点击多边形外部？

1条答案

相关问题

热门标签

最新问答