Leaflet笔记(10)Leaflet实现点击显示当前经纬度的效果

本文目录
  • 正文

上文《Leaflet笔记(9)最简单的事件响应》实现了最基本的click响应,本文将上文的例子包装一下,实现一个点击显示一个Popup的效果。基本效果如图:

Leaflet监听点击事件并弹出Popup

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

// use event
var mypop = L.popup();
m.on('click', function(e) {
  var content = '你临幸了这个点:<br>';
  content += e.latlng.toString();
  mypop.setLatLng(e.latlng)
       .setContent(content)
       .openOn(m);
});

这里监听事件和前文中的方法一致,使用on方法对地图实例mclick事件做监听。在点击的时候创建一个Popup,然后将Popup内容动态设置成点击位置的经纬度。

所有代码

leafletjs/note-9.html at master · sailor103/leafletjs

如您有疑问,可在文末留言,或到QQ群提问。

本站QQ群:291616564 麻辣GIS

微信公众号:malagis,扫描右边二维码直接关注。

微信捐助麻辣GIS 支付宝捐助麻辣GIS

如果本文对您有所帮助,欢迎对我们团队进行打赏捐助,让我们在传播3S的路上可以走得更远。


作者:,GIS爱好者。
分享本文,请您带上本文链接

发表评论