如何使用leaflet地图.on('click', function)事件处理程序向地图添加标记

25

我正在尝试使用事件处理程序向地图添加标记。当我使用回调函数时,我可以实现这一点,但是当我将函数从事件处理程序中分离出来时,就无法实现。

回调函数 (http://fiddle.jshell.net/rhewitt/U6Gaa/7/):

map.on('click', function(e){
    var marker = new L.marker(e.latlng).addTo(map);
});

单独的函数 (http://jsfiddle.net/rhewitt/U6Gaa/6/):

function newMarker(e){
    var marker = new L.marker(e.latlng).addTo(map);
}

1
我认为https://dev59.com/Zmkw5IYBdhLWcg3waZ1W#24342585将会帮助您添加和删除标记。 - Kedar.Aitawdekar
4个回答

22
在你的Fiddle代码中,函数所在的作用域错误。尝试将该函数移动到map函数内而不是它自己的作用域中...
即:将其改为:
});

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

使用(注意两个括号向下移动)

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

});

16

主要问题是你在函数addMarker内使用的变量map不是你存储创建的地图的变量。有几种方法可以解决这个问题,但最简单的方法可能是将创建的地图分配给第一行声明的变量map。以下是代码:

var map, newMarker, markerLocation;
$(function(){
    // Initialize the map
    // This variable map is inside the scope of the jQuery function.
    // var map = L.map('map').setView([38.487, -75.641], 8);

    // Now map reference the global map declared in the first line
    map = L.map('map').setView([38.487, -75.641], 8);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);
    newMarkerGroup = new L.LayerGroup();
    map.on('click', addMarker);
});

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

2
这是一个演示,当您单击地图时,它会添加4个标记。
第5次鼠标单击将删除所有标记:

animated demo

var MARKERS_MAX = 4;

var map = L.map('map').setView([51.4661, 7.2491], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 
    '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// a layer group, used here like a container for markers
var markersGroup = L.layerGroup();
map.addLayer(markersGroup);

map.on('click', function(e) {
    // get the count of currently displayed markers
    var markersCount = markersGroup.getLayers().length;

    if (markersCount < MARKERS_MAX) {
        var marker = L.marker(e.latlng).addTo(markersGroup);
        return;
    }

    // remove the markers when MARKERS_MAX is reached
    markersGroup.clearLayers();
});
#map {
  width: 100%;
  height: 200px;
}
<link href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.css" type="text/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.js"></script>

<div id="map"></div>

为了更容易地计数和去除标记,我将它们添加到LayerGroup对象而不是地图中。
但你也可以通过.addTo(map);调用将它们添加到地图中。
另外对其他答案的评论 - 我认为在创建标记或任何其他Leaflet.js对象时不需要使用new关键字。

-1
var marker = L.marker([35.737448286487595, 51.39876293182373]).addTo(map);
var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接