特定基础地图的传单弹出窗口

下面的工作代码段(取决于Leaflet CDN): // Create the mapvar map = L.map('map').setView([39.5, -0.5], 5);// Set up the OSM layervar baseLayer1 = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, name: "Base layer 1" });var baseLayer2 = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, name: "Base layer 2" });// add some markersfunction createMarker(lat, lng) { var marker = L.marker([lat, lng]); marker.on("click", function(e) { var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>"; map.openPopup(html, e.latlng, { offset: L.point(1, -24) }); }); return marker;}var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];// create group to hold markers, it will be added as an overlayvar overlay = L.featureGroup(markers);// show overlay by defaultoverlay.addTo(map);// show featuresmap.fitBounds(overlay.getBounds(), { maxZoom: 11});// make up our own property for activeBaseLayer, we will keep track of this when it changesmap.activeBaseLayer = baseLayer1;baseLayer1.addTo(map);// create basemaps and overlays collections for the layers controlvar baseMaps = {};baseMaps[baseLayer1.options.name] = baseLayer1;baseMaps[baseLayer2.options.name] = baseLayer2;var overlays = { "Overlay": overlay};// create layers controlvar layersControl = L.control.layers(baseMaps, overlays).addTo(map);// update active base layer when changedmap.on("baselayerchange", function(e) { // e.name has the name, but it may be handy to have layer reference map.activeBaseLayer = e.layer; map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em }); #map { height: 400px;} <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script><link href="https://npmcdn.com/[email protected]/dist/leaflet.css" rel="stylesheet"/><div id="map"></div>so I'm making a website using leaflet with dozens of base maps. I want to incorporate information about each map that is only visible if the user wants it. To do this, I would like to make an overlay map with popups, but I want the popups to change depending on the base map selected by the user.How would I go about doing this?Thank You So Much 解决方案 You need to either use a plugin that keeps track of the base maps for you (like active layers) or you need to do it yourself.If you are using the Leaflet layers control, you can subscribe to the basemapchange event to do this easily.You need two things: active base layer management (easy) and dynamic popups (not too hard)To wit:First, here is the event handler to track active base layer when it changes.map.on("baselayerchange", function(e) { // e.name has the layer name // e.layer has the layer reference map.activeBaseLayer = e.layer; console.log("base map changed to " + e.name); });Because using L.marker().bindPopup() creates the popup content right there and does not support callbacks, you must manually create the popups in response to click event by calling map.openPopup() with your dynamic html (dynamic because it uses a variable: the active basemap name) marker.on("click", function(e) { var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>"; map.openPopup(html, e.latlng, { offset: L.point(1, -24) }); });Here is a working example on JS fiddle: http://jsfiddle.net/4caaznsc/Working code snippet also below (relies on Leaflet CDN):// Create the mapvar map = L.map('map').setView([39.5, -0.5], 5);// Set up the OSM layervar baseLayer1 = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, name: "Base layer 1" });var baseLayer2 = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, name: "Base layer 2" });// add some markersfunction createMarker(lat, lng) { var marker = L.marker([lat, lng]); marker.on("click", function(e) { var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>"; map.openPopup(html, e.latlng, { offset: L.point(1, -24) }); }); return marker;}var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];// create group to hold markers, it will be added as an overlayvar overlay = L.featureGroup(markers);// show overlay by defaultoverlay.addTo(map);// show featuresmap.fitBounds(overlay.getBounds(), { maxZoom: 11});// make up our own property for activeBaseLayer, we will keep track of this when it changesmap.activeBaseLayer = baseLayer1;baseLayer1.addTo(map);// create basemaps and overlays collections for the layers controlvar baseMaps = {};baseMaps[baseLayer1.options.name] = baseLayer1;baseMaps[baseLayer2.options.name] = baseLayer2;var overlays = { "Overlay": overlay};// create layers controlvar layersControl = L.control.layers(baseMaps, overlays).addTo(map);// update active base layer when changedmap.on("baselayerchange", function(e) { // e.name has the name, but it may be handy to have layer reference map.activeBaseLayer = e.layer; map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em });#map { height: 400px;}<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script><link href="https://npmcdn.com/[email protected]/dist/leaflet.css" rel="stylesheet"/><div id="map"></div> 这篇关于特定基础地图的传单弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！