单击地图时添加新标记（OpenStreetMap，Leaflet JS）答案

【问题标题】：Add new marker when I click on the map (OpenStreetMap, Leaflet JS)单击地图时添加新标记（OpenStreetMap，Leaflet JS）
【发布时间】：2017-04-04 15:03:32
【问题描述】：

我想在右击时在地图上添加一个新的标记，

function InitialiserCarte() {

var map = L.map('map').setView([48.866667, 2.333333], 17);

// create the tile layer with correct attribution
var tuileUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

var attrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

var osm = L.tileLayer(tuileUrl, {
    minZoom: 8, 
    maxZoom: 17,
    attribution: attrib
});

osm.addTo(map);

var marker = L.marker([48.866667, 2.333333]).addTo(map);}

我用这个 jquery 调用这个函数（页面加载）

$(document).ready(function(){
    InitialiserCarte();
});

是否可以通过点击动作动态添加标记？

【问题讨论】：

可能与stackoverflow.com/questions/18388288/…和stackoverflow.com/questions/9912145/…有关

标签： javascript jquery leaflet openstreetmap

【解决方案1】：

    function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(macarte);
    var marker = L.marker(e.latlng).addTo(macarte)
}

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin="" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
    <style type="text/css">
        #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
            height:1000px;
            width: 1000px;
        }
    </style>
</head>
<script type="text/javascript">
    var theme = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
    var lat = 8.619543;
    var lon = 0.82;
    var alt =481;
    var macarte = null;
    //var trace = new Array();
    var i = 0;
    //var marker1;
    var markerClusters; // Servira à stocker les groupes de marqueurs
    var popup = L.popup();
  function initMap(){

      // Nous définissons le dossier qui contiendra les marqueurs
      //var iconBase = 'img';
      // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
      macarte = L.map('map').setView([lat, lon], 5);
      markerClusters = L.markerClusterGroup; // Nous initialisons les groupes de marqueurs
      // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
      L.tileLayer(theme, {
          // Il est toujours bien de laisser le lien vers la source des données
          //attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
          minZoom: 1,
          maxZoom: 20
      }).addTo(macarte);
      macarte.on('click', onMapClick);
  }


    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(macarte);
        var marker = L.marker(e.latlng).addTo(macarte)
    }




    $(document).ready(function(){
        initMap();
    });
</script>
<div id="imap">
    <div id="map">
        <!-- Ici s'affichera la carte -->
    </div>
</div>

【讨论】：

【解决方案2】：

从这里开始：the Leaflet Quick Start guide。 “处理事件”部分讨论了如何添加事件。在此快速入门指南中，以下是一些在鼠标单击时添加弹出窗口的示例代码：

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

尝试修改onMapClick 函数以添加标记而不是弹出窗口。您需要使用e.latlng 来设置标记位置。

【讨论】：