Question

我在传单中使用了一个度量插件工具，但是当我尝试在标记之间进行测量时，弹出窗口干扰是否有办法解决这个问题？我读了一些关于oddclicks的东西，我尝试使用它无济于事。

$(".leaflet-control-measure").click(function() {
  var oddClick = $(this).data("oddClick");
 $(this).data("oddClick", !oddClick);
 if (!oddClick) {
   map.off('click', popup);
 } else {
    map.on('click', popup);
 }
 });

   popup logic- I am reading from a database, the popup is called from python in a for loop, and rendered using the jinja2 template
 var markers= L.markerClusterGroup({
      disableClusteringAtZoom: 15,
      minZoom : 2

  });


  {% for item in markers %}


   var resortIcon = L.icon({
       iconUrl: '{{ item[3] }}',
      iconSize: [25, 25],
      popupAnchor: [0,-15]
    });

   var marker{{ item[0] }} = L.marker({{ item[5:] }}, {icon: resortIcon});
   var popup = "<table height='90'><tr><td>{{ item[1] }}</td></tr><tr><td 
 align='center'><b><i>{{ item[4] }}</b></i></td></tr><tr><td align='center'> 
   <a href='www.google.com' onmouseover='More info'><img src='../icon/contract.svg' height=30 width=30 /></a></td></tr></table>";
  marker{{ item[0] }}.bindPopup(popup);
  markers.addLayer(marker{{ item[0] }});
  map.addLayer(markers)


  {% endfor %}

Answer 1

如果我理解正确，您希望在测量时阻止弹出窗口出现。我绝不是leaflet的专家，因为我之前从未使用过它，但是通过挖掘一些文档，看起来这可能是你最好的选择。

基本上，您可以将事件处理程序绑定到每个标记上的popupopen事件，并且在该处理程序内，如果满足某些条件，您可以立即关闭弹出窗口（即＆＃34;测量模式＆＃34;已启用）。

这是如何运作的：

＆＃13;

var startingCoords = [40.07573, -105.401047];
var markerCoords = [
  startingCoords,
  [40.512318, -105.665104],
  [39.825169, -104.994123],
];
var map = L.map('map').setView(startingCoords, 8);
var enablePopups = document.getElementById("enablePopups");
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function onPopupOpen(e) {
  // check if you it is okay for the popup to open - if not, close it.
  if (!enablePopups.checked) {
    // "this" refers to the marker object of the marker that was clicked on, whereas
    // e.target will refer to the DOM element itself
    this.closePopup();
  }
}

// loop to create each marker
markerCoords.forEach(function (coords) {
  var marker = L.marker(coords).addTo(map).bindPopup('Location at [' + coords + ']');
  // use .bind(marker) so we can access the marker itself via "this" inside the onPopupOpen
  // handler. That way, we don't have to keep an array of markers as a reference - each one
  // is self-referencing.
  marker.on("popupopen", onPopupOpen.bind(marker));
});

＆＃13;

#map {
  width: 500px;
  height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
Enable Popups ? <input type="checkbox" checked id="enablePopups" />
<p>Click on a marker with "enable popups" checked vs unchecked - you can manually disable the popups based on a condition</p>
<div id="map"> </div>

＆＃13;

Answer 2

似乎我们将弹出窗口添加到图层/多边形后，将首先捕获其单击并停止进一步的事件传播，从而使度量图层无法获得单击事件来绘制线条。

但是，我们可以通过一些棘手的方法来绕开它。例如，开始测量时，遍历所有图层并删除其click事件处理程序，以防止它们响应click；然后，在完成测量后，我们重新添加其点击事件处理程序以保持其原始行为。

这很棘手：

 //  the cached clicks for other layers
  _cachedClicks: [],

  //  try to remove click event handlers of other layers
  _removeOtherLayersClicks: function (layer) {
    if (layer === this._layerPaint) {
      return;
    }
    var loop = function (childLayer) {
      if (childLayer._events && childLayer._events.click) {
        this._cachedClicks.push({
          layer: childLayer,
          click: childLayer._events.click,
        });
        childLayer._events.click = undefined;
      }
      if (childLayer.eachLayer) {
        this._removeOtherLayersClicks(childLayer);
      }
    }.bind(this);
    layer.eachLayer(loop);
  },

  //  try to bring back the click event handlers
  _addOtherLayersClicks: function () {
    this._cachedClicks.forEach(function (cached) {
      var layer = cached.layer;
      var click = cached.click;
      layer._events.click = click;
    });
  },

您可以在https://github.com/aprilandjan/leaflet.measure/issues/8

中查看更多详细信息

在传单中使用测量工具时禁用弹出窗口

2 个答案: