Leaflet初体验0x1:标注,弹窗,事件

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);

 

转载自:https://blog.csdn.net/funkstill/article/details/85698777

You may also like...