Leaflet.js map.on('click', function..对我没用

leaflet.js map.on('click', function... not working for me

本文关键字:function click map js Leaflet on      更新时间:2023-09-26

我试图记录在Leaflet.js地图上单击的延迟。我计划将这个记录到数据库中,但目前我只想看到被记录的点击位置的证据。我只是想激活一个警报,根据传单文档打印文件。

在这段代码中有一些额外的东西,它只是产生自定义标记,但现在很好。

如果有人能指出我在哪里出错了,让简单的警报在底部工作,我将不胜感激。

window.onload = function() {
var energyIcon = L.icon({
    iconUrl: '../scripts/leaflet/images/marker-icon-green.png',
    iconRetinaUrl: '../scripts/leaflet/images/marker-icon-green-@2x.png',
    iconSize: [25, 41],
    iconAnchor: [25, 41],
    popupAnchor: [-12, -38],
    shadowUrl: '../scripts/leaflet/images/marker-shadow.png',
    shadowRetinaUrl: '../scripts/leaflet/images/marker-shadow-@2x.png',
    shadowSize: [41, 41],
    shadowAnchor: [25, 41]
});
var foodIcon = L.icon({
    iconUrl: '../scripts/leaflet/images/marker-icon.png',
    iconRetinaUrl: '../scripts/leaflet/images/marker-icon--@2x.png',
    iconSize: [25, 41],
    iconAnchor: [25, 41],
    popupAnchor: [-12, -38],
    shadowUrl: '../scripts/leaflet/images/marker-shadow.png',
    shadowRetinaUrl: '../scripts/leaflet/images/marker-shadow-@2x.png',
    shadowSize: [41, 41],
    shadowAnchor: [25, 41]
});
var tourismIcon = L.icon({
    iconUrl: '../scripts/leaflet/images/marker-icon-red.png',
    iconRetinaUrl: '../scripts/leaflet/images/marker-icon-red-@2x.png',
    iconSize: [25, 41],
    iconAnchor: [25, 41],
    popupAnchor: [-12, -38],
    shadowUrl: '../scripts/leaflet/images/marker-shadow.png',
    shadowRetinaUrl: '../scripts/leaflet/images/marker-shadow-@2x.png',
    shadowSize: [41, 41],
    shadowAnchor: [25, 41]
});
var map = new L.Map('map', {
    zoom: 12, 
    center: new L.latLng(data[data.length -1].loc) //set center from first location
}); 
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
var markersLayer = new L.LayerGroup();  //layer contain searched elements
map.addLayer(markersLayer);
// ===== populate map with markers from sample data and give it a different icon depending on its 'type'
for(i in data) {
    var title = data[i].title,  // value searched
        loc = data[i].loc,      // position found
        type = data[i].type;    // type
        title = data[i].title   // title
    if (data[i].type == "energy") {
        var marker = new L.Marker(new L.latLng(loc), {title: title, icon: energyIcon});
    } else if (data[i].type == "food") {
        var marker = new L.Marker(new L.latLng(loc), {title: title, icon: foodIcon} );
    } else if (data[i].type == "tourism") {
        var marker = new L.Marker(new L.latLng(loc), {title: title, icon: tourismIcon} );
    }
    marker.bindPopup('Hello. I''m ' + title + '. This is a place of type "'+ type + '" and is number ' + i + ' in this view.');
    markersLayer.addLayer(marker);
}
// ===== inizialize search control
map.addControl( new L.Control.Search({
    wrapper: 'findbox',
    layer: markersLayer,
    initial: false,
    collapsed: false
}) );
map.on('click', function(e) {
    alert(e.latlng); // e is an event object (MouseEvent in this case)
}); 

}

似乎map.addControl()正在制造问题。

注释掉这个函数,然后运行代码。希望能成功