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

wz8daaqr  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(287)

我尝试使用事件处理程序向Map添加标记。我可以使用回调函数管理此操作,但当我将函数与事件处理程序分离时,就无法管理此操作。
回调(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);
}
roejwanj

roejwanj1#

在你的代码中,函数在错误的作用域中。试着将函数移到map函数中,而不是它自己的作用域中…
即,而不是:

});

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

使用(注意2个括号进一步向下移动)

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

});
d8tt03nd

d8tt03nd2#

主要的问题是你在函数addMarker中使用的变量map不是你存储创建的map的变量。有几种方法可以解决这个问题,但最简单的方法是将创建的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);
}
koaltpgm

koaltpgm3#

这里有一个演示,它添加了4个标记,当你点击Map.
并在第5次单击鼠标时再次将其全部删除:

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对象中,而不是添加到Map中。
但是您也可以使用.addTo(map);调用将它们添加到Map中。
另外,对其他答案的评论-我认为在创建标记或任何其他Leaflet.js对象时,您不需要new关键字。

5hcedyr0

5hcedyr04#

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

相关问题