标签：用户 imei ref mdi example 阶段 ati you hone
接着是处理事件
例子是用户点击地图，导致地图触发‘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页面中放置以下行来将其设置为实际大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
并且为了使我们的地图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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://mapbox.com">Mapbox</a>‘, 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中的标记图标由L.Icon对象定义，在创建标记时作为选项传递。先创建一个黄色的叶子图标：
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 图标放置完成
标签：用户 imei ref mdi example 阶段 ati you hone
原文地址：https://www.cnblogs.com/craller/p/8920309.html
