Leaflet笔记(11)监听Marker的点击事件

前方《Leaflet笔记(9)最简单的事件响应》和《Leaflet笔记(10)Leaflet实现点击显示当前经纬度的效果》都是对地图实例本身做的事件监听及响应,其实在Leaflet中每种实现对象都可以添加事件。本文以Marker为例,实现点击Marker时弹窗的效果。

Leaflet监听Marker点击事件

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

// add a marker
var marker = L.marker([36.52,120.31]).addTo(m);    

// bind event on marker
marker.on('click', function(e) {
  console.log(e);
  alert('我是Marker,被点了。');
})

这里监听事件和前文中的方法一致,使用on方法对Marker实例markerclick事件做监听,在点击的时候显示弹窗。

所有代码

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

没有下文

如果对本文有其他疑问,可以在本文下方留言,或者到 麻辣GIS问答 提问。
本站QQ群:291616564 麻辣GIS
微信公众号:malagis,扫描二维码直接关注。

打赏¥1

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

发表评论