Как открыть всплывающее окно на основе идентификатора кнопки, а не нажатия на точку в Leaflet, используя Jquery

Question

Я пытаюсь открыть всплывающее окно маркера, когда вы нажимаете кнопку $ ("# zoomTo" + str2.replace (/ / g, '')). Я не могу понять, как открыть всплывающее окно. Вот хороший пример http://jsfiddle.net/abenrob/ZkC5M/, но мой код сильно отличается. Я думаю, что .bindPopup после определения $ ("# zoomTo" + str2.replace (/ / g, '')). Click (function (), поэтому .openPopup () не будет работать. Пожалуйста, помогите спасибо!

function refreshAttractions() {
  $.ajax({
    url: "getdata.php",
    type: "POST",
    success: function(response) {
      if (lyrAttractions) {
        mymap.removeLayer(lyrAttractions);
        $("#sidebar").html("");
      }

      lyrAttractions = L.geoJSON(JSON.parse(response), {
        pointToLayer: function(feature, latlng) {
          var str2 = feature.properties.restaurant.replace(/'/g, "");
          var str = "<button id = 'zoomTo" + str2.replace(/ /g, "");
          str += "'class='form-control btn-primary eats'>";
          str += feature.properties.restaurant + "</button>";
          $("#sidebar").append(str);

          var str3 = feature.properties.restaurant + "<hr>";
          str3 += "Meal: " + feature.properties.meal + "<br>";
          str3 += "Price: " + feature.properties.price + "<br>";
          str3 += "Neighbourhood: " + feature.properties.neighbourhood + "<br>";
          str3 += "Submitted by: " + feature.properties.name + "<br>";
          str3 +=
            "</a><br><button id='btnEdit' class='btn btn-outline-warning'     onclick='editAttractions(" +
            feature.properties.id2 +
            ")'>Edit</button>" +
            "<br><button id='btnGoogle' class='btn btn-outline-info' onclick='(console.log(" +
            feature.properties.restaurant +
            "))'>Google</button>";

          $("#zoomTo" + str2.replace(/ /g, "")).click(function() {
            mymap.setView([latlng.lat, latlng.lng], 18);
            xlist = latlng.lng; //used to get x,y for highlighted marker
            ylist = latlng.lat;
            //feature.openPopup();
          });

          return L.marker(latlng).bindPopup(str3);
        }
      });
      lyrAttractions.addTo(mymap);
    }
  });
}

//Used to highlight Points on the Side.
var highlight = {};
$("#sidebar").on("click", function() {
  lat = ylist;
  lon = xlist;
  if (highlight != undefined) {
    mymap.removeLayer(highlight);
  }
  highlight = L.circleMarker([lat, lon], {
    color: "red",
    weight: 7,
    radius: 25
  }).addTo(mymap);
});

mymap.on("click", function() {
  mymap.removeLayer(highlight);
});

Answer 1

По умолчанию, когда вы связываете всплывающее окно, вы должны нажать, чтобы открыть окно. Вы можете использовать подсказку, чтобы получить ту же функциональность. Как вы можете видеть здесь:

if ($('#checkbox1').is(':checked')) {
    lyrAttractions.eachLayer(function (layer) {
    if (layer.feature.properties.id == 1)
    {
        layer.bindTooltip("Hello World", {permanent: true}).openTooltip()
    }
});

Как только вы отметите флажок 1, всплывающая подсказка появится для id объекта = 1. В тех же строках вы можете закрыть подсказку.