Disable popup window while using the measure tool in leaflet

问题

I am using a measure plugin tool in leaflet but when I try to measure between markers the pop up window interfers is there a way to fix this? I read something about oddclicks, I tried using that to no avail.

$(".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 %}

回答1:

If I understand you correctly, you are wanting to prevent the popups from appearing if you are measuring. I am by no means an expert in leaflet, as I have never used it before, but from digging through some of the documentation, it seems like this might be your best option.

Essentially, you can bind an event handler to the popupopen event on each marker, and inside that handler, you can immediately close the popup if certain conditions are met (i.e. "measure mode" is enabled).

This is how it would work:

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

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

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

来源：https://stackoverflow.com/questions/50630832/disable-popup-window-while-using-the-measure-tool-in-leaflet

标签

javascript

jquery

leaflet