单击地图时添加新标记（OpenStreetMap，Leaflet JS）
Posted
技术标签:
【中文标题】单击地图时添加新标记（OpenStreetMap，Leaflet JS）【英文标题】：Add new marker when I click on the map (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();
);
是否可以通过点击动作动态添加标记？
【问题讨论】：
可能与***.com/questions/18388288/…和***.com/questions/9912145/…有关 【参考方案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 来设置标记位置。
【讨论】：
以上是关于单击地图时添加新标记（OpenStreetMap，Leaflet JS）的主要内容，如果未能解决你的问题，请参考以下文章
单击标记时，新按钮会自动出现在谷歌地图（Android）上？如何删除？