Question

如何在传单地图上覆盖div而不是点击？我设置我在覆盖的div上尝试了pointer-events: none和auto，但这没有帮助。将pointer-events设置为none会导致radiobutton无法再点击...

＆＃13;

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker on changing it's position
  marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

＆＃13;

#map {
    height: 500px;
    width: 80%;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

＆＃13;

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
  <div class = "overlay">
    <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

＆＃13;

Answer 1

您可以在地图外移动叠加div ，然后使用negative margins和z-index将其置于其上方。你走了：

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker on changing it's position
  marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
    height: 500px;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  margin-left: -100px;
  position: relative;
  float: right;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
</div>

<div class="overlay">
    <input type="radio" class = "someButton">Foo Bar
 </div>

Answer 2

将叠加div移动到地图元素之外：

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker on changing it's position
  marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

.container {
    position: relative;
    width: 500px;
}
#map {
    height: 500px;       
}

.overlay {     
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;      
  background-color: rgba(255, 50, 50, 0.5);     
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div class="container">
    <div id="map"></div>
    <div class = "overlay">
        <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

Answer 3

另一种解决方案是使用leaflet自行提供的方法。

var div = L.DomUtil.get('overlay'); // this must be an ID, not class!
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);

Answer 4

尝试此操作以防止点击事件传播到较低层，同时保留pointer-events: auto;

<div class = "overlay" onclick="alert(event);event.stopPropagation();">

这里我使用了event.stopPropagation();内联，但你可以在JS中使用一个函数。

＆＃13;

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker on changing it's position
  marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

＆＃13;

#map {
    height: 500px;
    width: 80%;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

＆＃13;

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
  <div class = "overlay" onclick='console.log("Event: "+ event.type);event.stopPropagation();'>
    <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

＆＃13;

在传单上叠加div而不是点击

4 个答案: