如何让单个按钮同时实现Leaflet地图KML导出与模态框打开功能？

Hey there! To make your "Export Feature" button handle both the KML export and automatically open the contact modal right after, you just need a couple small tweaks to your existing code. Here's how to do it:

Step 1: Update the Export Click Handler #

Modify your export script to add the modal trigger at the end of the function, plus a line to stop unwanted page jumps (since your button is an <a> tag with href='#'):

document.getElementById('export').onclick = function(e) {
  // Stop the link from jumping to the top of the page
  e.preventDefault();

  // Extract GeoJson from featureGroup
  var data = featureGroup.toGeoJSON();
  var kml = tokml(data);

  // Convert to dataURL format
  var convertedData = 'application/vnd.google-earth.kml+xml;charset=utf-8,' + encodeURIComponent(kml);

  // Set up the KML download
  document.getElementById('export').setAttribute('href', 'data:' + convertedData);
  document.getElementById('export').setAttribute('download','data.kml');

  // Open the contact modal right after export setup
  document.getElementById('id01').style.display='block';
}

Step 2: Confirm Your Modal Setup #

Your existing HTML modal code (id="id01") is already set up correctly — we're just reusing the same display property toggle that your original Submit button uses. The close functionality (the × button) will still work exactly as before.

How This Works #

• e.preventDefault() fixes the annoying page jump that would happen from the <a> tag's default behavior.
• After setting up all the KML export logic, we call document.getElementById('id01').style.display='block' — this triggers the modal to open instantly, right as the browser starts the KML download (since the file is generated locally as a data URL, there's no delay).

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