【问题标题】:Leaflet marker by click点击传单标记
【发布时间】:2020-12-17 13:48:30
【问题描述】:

是否可以在leafletjs 中通过单击地图来创建标记,我已经尝试了很多不同的方法,但没有任何效果。 我的意思是像创建一个单击事件,在该事件中创建一个标记。

这是我的代码,在此示例中,我尝试创建一个函数,如果您单击任何位置,该函数会在某个位置创建一个标记,但我的目标是在您单击的位置创建一个标记。我对这种语言和传单真的很陌生,如果这段代码很愚蠢,我很抱歉。

<!DOCTYPE html>
<html>
    <head>
        <!--<meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,
         user-scalable=no, width=device-width">
        <title>Blank App</title>-->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
           integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0
           vlaXaVUearIOBhiXZ5V3ynxwA=="
           crossorigin=""></script>
        <style>
            #mapid {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
        </style>
    </head>
    <body>
        <div id="mapid"></div>
        <script>
            var mymap = L.map('mapid').setView([0, 0], 1);
        
            L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=UVvjZnbqOD4DfEYUrXxm', {
                attribution:'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            }).addTo(mymap);


            function onMapClick(e) {
                var marker = L.marker([50.5, 30.5]).addTo(map);
            }
            mymap.on('click', onMapClick);

        </script>
    </body>
</html>

【问题讨论】:

  • 你试过什么代码?请在问题中包含它

标签: events leaflet click marker


【解决方案1】:

使用事件中的 latlng 也使用 mymap:

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

【讨论】:

    猜你喜欢
    • 2018-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-15
    相关资源
    最近更新 更多