我所具有的代码显示地图，并且标记仅在代码中提到了经久的区域上弹出，但是对于我的Web应用程序，我希望用户触摸任何区域，并用弹出窗口显示标记显示该地点的经纬度和其他属性
<!DOCTYPE html>
<html>
<head>
<title>Inline Map</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body background="G:\Intership\sfedit.jpeg" style="width:100%">
<p style="text-align:centre;">Learn for free</p>
<!-- To display the map -->
<div id="map"></div>
<!-- Map Code -->
<script>
// Create variable to hold map element, give initial settings to map
var map = L.map('map',{ center: [18.5214280, 73.8544541], zoom: 14});
// Add OpenStreetMap tile layer to map element
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);
// Create an Empty Popup
var popup = L.popup();
// Write function to set Properties of the Popup
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
// Listen for a click event on the Map element
map.on('click', onMapClick);
fetch('https://cdn.glitch.com/3b46ae34-c2e2-48fe-b99c-5bb9412d0e1a%2Fpmpml_geojson_busstop.geojson?v=1589713237973')
.then(function (response){
return response.json();
})
.then(function(data){
L.geoJson(data,{
onEachFeature: function (feature, layer) {
layer.bindPopup("bus stop name:"+feature.properties['stop_name']+ "<br>stop code:"+feature.properties['stop_code']+ "<br>Latitude:"+feature.properties['stop_lat']+ "<br>Longitude:"+feature.properties['stop_lon']);
}
}).addTo(map);
});
fetch('https://cdn.glitch.com/3b46ae34-c2e2-48fe-b99c-5bb9412d0e1a%2FPune_streetfile.geojson?v=1589720389890')
.then(function (response){
return response.json();
})
.then(function(data){
L.geoJSON(data).addTo(map);
});
</script>
</body>
</html>