リーフレットにオーバーレイされているdivをクリックしないようにする

Question

フライスルではなくリーフレットにdivのオーバーレイを作成するにはどうすればよいですか？私は を設定しました。オーバーレイするdivにpointer-events: noneとautoを試しましたが、それは役に立たなかった。 noneへpointer-eventsを設定すると、あなたはあなたのマップの外にあなたのオーバーレイのdivを移動してからnegative marginsを使用して、その上にそれを置くことができ...

// 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: 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; 
 
}

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

Answer 1

移動オーバーレイの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 2

をradiobuttonはもうクリックできないという効果があったとZ-指数。ここに行く：

// 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 3

がに伝播するためにクリックイベントを防ぐにこれを試してみてください維持しながら下位層pointer-events: auto;

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

ここではevent.stopPropagation();をインラインで使用しましたが、JSで関数を使用できます。

// 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: 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; 
 
}

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