Leaflet笔记(7)在地图上绘制弹出框(Popup)

本文介绍在Leaflet的地图上绘制弹出框(Popup)的方法。什么是Popup?就是类似下面的效果。

可以看到在前文绘制的Marker上位置增加了一个弹出的提示框。这个效果在Leaflet中也可以很简单的实现。下面我们在Marker、Circle、Polygon中都添加一个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);

// add a marker
var marker = L.marker([36.52,120.31]).addTo(m);    
// popup
marker.bindPopup('这是个Marker').openPopup();

// add a circle
var circle = L.circle([36.52,120.31], {
  color: 'green',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 10000
}).addTo(m);
// popup
circle.bindPopup('我是个圆');

// add a polygon
var polygon = L.polygon([
  [36, 121],
  [37, 121],
  [36.5, 122],
  [36.5, 122.2]
]).addTo(m);
// popup
polygon.bindPopup('俺是个多边形');

这里使用的是bindPopup方法为第个图形、Marker绑定了一个Popup,使用这个方法会自动为被绑定的对象添加click事件,使用鼠标点击都能触发这个Popup显示出来。

那为什么Marker上的Popup能够自动显示出来呢?仔细观察,我们可以发现在Marker的绑定函数后又调用了openPopup方法来将Popup显示出来。

是不是发现了什么?是的,Leaflet的API设计和jQuery很像,都是链式的调用方法,非常优雅。

所有代码

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

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

打赏¥1

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

发表评论