Ajax二次点击数据刷新及Leaflet标记点关联Polyline异常问题咨询

Hey there, I see exactly what's going on here—your polyline issue is all about variable scoping! Let me break it down and show you how to fix it properly, plus weigh in on your two ideas.

The Root Cause #

Right now, your marker_event and polyline_event variables are either implicit globals or using var (which has function-level scope). Every time you create a new marker and polyline via the Ajax callback, you're overwriting the previous references. That's why clicking any marker always shows the last polyline you created—all the click events are pointing to the same overwritten variable.

Your Proposed Ideas: Which Works? #

1. Refresh the page after each click: This would "reset" everything, but it's a terrible user experience—you'd lose all existing markers every time, which defeats the purpose of having multiple markers on the map. Definitely skip this one.
2. Associate polyline to specific markers: This is the right approach! We just need to make sure each marker keeps track of its own polyline, so there's no cross-over between them.

The Fix: Block-Scoped Variables or Marker Properties #

Let's adjust your code to give each marker its own polyline reference. Here are two clean ways to do it:

Option 1: Use let for Block Scoping

Since the Ajax success callback runs each time you click the button, using let (instead of var) will create a new scope for each marker/polyline pair, so they don't overwrite each other:

$("#search-button_event").click(function () { 
  $.ajax({ 
    type: "POST", 
    url: "/mapaa", 
    data: { nameevent: $("#name_of_event").val() }, 
    success: function (response) { 
      const nazwa = response['name']; 
      let droga = response['route']; 
      droga = droga.replaceAll("{","").replaceAll("}","");
      const string = droga.split(',');
      // Assuming 'array' is your coordinate array from the response—ensure it's properly scoped!

      // Use let to create block-scoped variables
      let marker_event = L.marker(array[0]).bindPopup(); 
      let polyline_event = L.polyline(array, {color: 'red'});

      marker_event._popup.setContent(
        '<form method="POST" action="/mapaa">'+
          '<p>Nazwa: '+nazwa+'</p>'+
          '<input name="nameOfEvent" type="hidden" value="' + nazwa + '" id="nameOF">'+
          '<button type="submit" id="form-submit" name="form-submit" class="btn btn-warning btn-block">Dołącz do wydarzenia</button>'+
        '</form>'
      );

      marker_event.addTo(mymap);

      // Attach click event that uses the local polyline_event
      marker_event.on('click', function(){ 
        polyline_event.addTo(mymap); 
      });

      marker_event.getPopup().on('remove', function() { 
        polyline_event.remove(); 
      });

      mymap.setView(array[0],14);
    }, 
  }); 
});

Option 2: Attach Polyline Directly to the Marker

If you want to be extra explicit, you can store the polyline as a custom property on the marker itself:

// Inside the success callback:
marker_event._polyline = L.polyline(array, {color: 'red'});

// Then in the click handler:
marker_event.on('click', function(){ 
  this._polyline.addTo(mymap); 
});

// And the remove handler:
marker_event.getPopup().on('remove', function() { 
  marker_event._polyline.remove(); 
});

Key Changes to Note #

• Replaced var with let/const to create block-scoped variables that don't leak between Ajax calls.
• Ensured each marker's click/remove events reference its own polyline, not a global or overwritten variable.
• Cleaned up the string manipulation for droga to avoid redundant variables.

This should fix the issue where clicking older markers shows the wrong polyline—each marker will now only interact with its own associated line.

内容的提问来源于stack exchange，提问作者helper