Leaflet笔记(9)最简单的事件响应
发布时间: 2017-03-02
所属分类: Leaflet学习笔记
之前写了Leaflet中绘图添加Marker等方法,本文介绍在Leaflet中添加简单的事件响应方法。事件是地图交互的重要桥梁,通过事件可以使用户方便的查看控制地图的各种行为。下面以点击地图这个简单的示例,介绍使用Leaflet添加事件响应的方法。
Leaflet监听点击事件
var m = L.map('map-container').setView([36.52,120.31], 7);
var tileAddress = 'https://api.mapbox.com/styles/v1/yqcim/';
tileAddress += 'cizh1ma3400ez2so5x1anhuzo/tiles/256/{z}/{x}/{y}';
tileAddress += '?access_token=pk.eyJ1IjoieXFjaW0iLCJhIjoiY2l6ZmhnZjEx';
tileAddress += 'MDBhajJ4cGxnNGN5MnhpdCJ9.pcZtdfk8mSFboCdwqkvW6g';
var attribution = 'Map data © <a href="http://openstreetmap.org">';
attribution += 'OpenStreetMap</a> contributors, '
attribution += '<a href="http://creativecommons.org/licenses/by-sa/2.0/">';
attribution += 'CC-BY-SA</a>, ';
attribution += 'Imagery © <a href="http://mapbox.com">Mapbox</a>';
L.tileLayer(tileAddress, {
maxZoom: 18,
attribution: attribution,
id: 'mapbox.streets'
}).addTo(m);
// try event
m.on('click', function(e) {
console.log(e);
alert('纬度:' + e.latlng.lat + '\n经度:' + e.latlng.lng);
});
这里使用的是on
方法对地图实例m
的click
事件做了监听。在点击的时候弹出当前点击位置的经纬度,其中经纬度数据是从点击的事件参数e
中获取的。效果如图:
在线预览
相关阅读
声明
1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。
2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。
手机阅读
公众号关注
知识星球
手机阅读
最新GIS干货
私享圈子