接着是处理事件
例子是用户点击地图，导致地图触发'click'事件
map.on('click', function(e) { alert(e.latlng);} ); Leaflet通过引用来处理事件侦听器，因此如果您想要添加侦听器并将其删除，请将其定义为一个函数：
function onClick(e) { ... }map.on('click', onClick);map.off('click', onClick); 这里我们可以写成：
function onMapClick(e) { alert("You clicked the map at " + e.latlng);}mymap.on('click', onMapClick); 监听器函数的第一个参数是一个事件对象 - 它包含有关发生事件的有用信息。例如，地图点击事件对象（e在上例中）具有latlng属性，该属性是发生点击的位置。
改进一下示例 点击地图，你会看到弹出的坐标：
function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap);}mymap.on('click', onMapClick); 进入新的阶段--------------------------------------------------------------------------------------------------********
针对iPhone，iPad或Android手机等移动设备调整的全屏地图，以及如何轻松检测并使用当前用户位置。
准备新的页面，像前面那个页面一样引入css和js
这里我们需要告诉移动浏览器禁用不必要的页面缩放，并通过在headHTML部分或HTML页面中放置以下行来将其设置为实际大小
并且为了使我们的地图div元素延伸到所有可用空间（全屏），我们可以使用下面的CSS代码
body { padding: 0; margin: 0;}html, body, #map { height: 100%; width: 100vw;} 初始化地图并且获取地图，像上一个页面一样
var map = L.map('map').fitWorld(); map.locate({setView: true, maxZoom: 16}); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY3JhbGxlciIsImEiOiJjamdib3VwZ2kxN25kMzNtcXluaGowOXNmIn0.aPgP5OMOI0P4SU1OnN5i_Q', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets'}).addTo(map); 这里的mapid是我的 也可以自己申请
地理位置获取：locate 用于将地图视图缩放到检测到的位置
map.locate({setView: true, maxZoom: 16}); 在自动设置地图视图时，我们在此指定16作为最大缩放。只要用户同意共享位置并且浏览器检测到该位置，地图就会将视图设置为该位置。
locationfound和locationerror事件：
locationfound：在检测到的位置添加一个标记，通过locationfound在locateAndSetView调用之前向事件添加一个事件监听器来显示弹出窗口中的准确性：
function onLocationFound(e) { var radius = e.accuracy / 2； L.marker(e.latlng).addTo(map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); L.circle(e.latlng, radius).addTo(map);}map.on('locationfound', onLocationFound); 但是，如果地理位置失败，则显示错误消息也会很好：
function onLocationError(e) { alert(e.message);}map.on('locationerror', onLocationError); 如果您将setView选项设置为true并且地理位置失败，则会将视图设置为全局。
下一个示例------------------------------------------------------------------------------------------------------****
自定义图标的标记
定义自己的图标以供放置在地图上的标记使用。
要制作自定义图标，我们通常需要两个图像 - 实际图标图像和其阴影图像。
创建图标：
Leaflet中的标记图标由对象定义，在创建标记时作为选项传递。先创建一个黄色的叶子图标：
var yellowIcon = L.icon({ iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png', shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64], // size of the shadow iconAnchor: [22, 94], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor}); 在地图上放此标记：
L.marker([51.5,0.09],icon:{yellowIcon}).addTo(map) 定义一个图标类：
如果我们需要创建多个共同点的图标呢？那就要我们自己定义自己的包含共享选项的图标类，继承自L.Icon！
var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] }}); 现在可以从这个类中创建所有三个叶子图标并使用它们:
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'}); 最终在地图上放置一些带有这些图标的标记:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf."); ok 图标放置完成