Leaflet笔记(8)在地图上单独绘制弹出框(Popup)

上文《Leaflet笔记(7)在地图上绘制弹出框(Popup)》中添加的Popup是依托其他对象绑定的，比如Marker、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('俺是个多边形');

// popups layers
var popup = L.popup()
  .setLatLng([35,120])
  .setContent('俺是一个Popup图层')
  // .openOn(m);
  .addTo(m);

看最后的代码，和bindPopup方法不同，这里使用的是Leaflet的popup方法创建了一个Popup实例，并使用setLatLng设置了Popup的位置，然后使用了setContent设置了Popup的提示内容，最后使用addTo或者openOn方法将新建的Popup实例添加到地图上。

效果图

addTo 和 openOn 方法的区别

这个是比较有意思，使用addTo方法添加的Popup会按照顺序添加；而openOn方法比较霸道，用了它，之前添加的Popup即使已经openPopup了，也会被收起来，然后让openOn的显示出来。

在线预览

绘制单独的弹出框(Popup)层