Leaflet初体验0x1：标注，弹窗，事件_leaflet marker 右击事件浮窗-优快云博客

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/85698777

本文介绍了Leaflet库的使用，包括创建Markers、circles和polygons，展示了如何配合popups（弹窗）进行交互，并详细讨论了如何处理地图上的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Markers, circles and polygons

//添加标注
var marker = L.marker([42.05,121.66]).addTo(mymap);
//画圆
var circle = L.circle([42.05,121.64],{
	color:'red',
	fillColor:'#f03',
	fillOpacity:0.5,
	radius:500
}).addTo(mymap);
//画多边形
var polygon = L.polygon([
	[42.057813,121.661045],
	[42.059071,121.673693],
	[42.05251,121.675921],
	[42.05101,121.663129]
]).addTo(mymap);

Working with popups（弹窗）

//给maker,circle,polygon绑定事件
marker.bindPopup("<b>Hello Leaflet!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon");

也可以使用弹出窗口作为图层(当需要的不仅仅是将弹出窗口附加到一个对象上)。这里使用openOn而不是addTo，因为它在打开一个新的弹出窗口时，可以自动关闭先前打开的弹出窗口。

var popup = L.popup()
	.setLatLng([42.02,121.66])
	.setContent("I am a standalone popup.")
	.openOn(mymap);

Dealing with events

//创建并绑定事件
function onMapClick(e){
	alert("You clicked the map at "+e.latlng);
}
mymap.on('click',onMapClick);

//用弹窗替换警告框
var latlngPopup = L.popup();
function onMapClick(e){
	popup
		.setLatLng(e.latlng)
		.setContent("You clicked the map at "+e.latlng)
		.openOn(mymap);
}
mymap.on('click',onMapClick);