Question

我试图在Leaflet.js地图上记录点击的latlng。我计划将其记录到数据库中，但目前我只想查看记录点击位置的证据。我只是尝试根据传单文档激活打印latlng的警报。

此代码中还有一些其他内容，它们只是生成自定义标记，但现在还可以。

如果有人可以指出我在底部工作时遇到简单警报的问题，我会很感激。

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)
});

}

Answer 1

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

注释掉此功能，然后运行您的代码。希望它能运作

leaflet.js map.on（＆＃39;点击＆＃39;，功能...不适合我

1 个答案: