เป็นไปได้ใน Leaflet ที่ป๊อปอัปเปิดขึ้นเมื่อวางเมาส์ไม่ใช่คลิก?
สิ่งนี้ใช้ได้กับเครื่องหมายเพียงครั้งเดียว แต่ฉันต้องการเครื่องหมายจำนวนมากขึ้น:
marker.on('mouseover', function(e){
marker.openPopup();
});
เป็นไปได้ใน Leaflet ที่ป๊อปอัปเปิดขึ้นเมื่อวางเมาส์ไม่ใช่คลิก?
สิ่งนี้ใช้ได้กับเครื่องหมายเพียงครั้งเดียว แต่ฉันต้องการเครื่องหมายจำนวนมากขึ้น:
marker.on('mouseover', function(e){
marker.openPopup();
});
คำตอบ:
หากคุณต้องการที่จะแสดงป๊อปอัพสำหรับเครื่องหมายที่คุณสามารถใช้เครื่องหมายวิธี bindPopup
จากนั้นคุณสามารถควบคุมได้มากขึ้นและมันจะถูกผูกไว้กับเครื่องหมายของคุณโดยอัตโนมัติ
ในตัวอย่างด้านล่างคุณสามารถแสดงป๊อปอัพเมื่อผู้ใช้เลื่อนเมาส์ไปและซ่อนไว้เมื่อผู้ใช้เลื่อนเมาส์ออก:
marker.bindPopup("Popup content");
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});
หมายเหตุ: คุณอาจพบปัญหาเกี่ยวกับการปิดป๊อปอัปเมื่อคุณวางเมาส์บนป๊อปอัปเองดังนั้นคุณอาจต้องปรับป๊อปอัปใน (ดูการตั้งค่าป๊อปอัพ) เพื่อแสดงป๊อปอัปของคุณออกไปเล็กน้อย หายไปง่ายเกินไป
สิ่งนี้จะช่วยในการแสดงป๊อปอัพที่ตัววางเมาส์เครื่องหมาย
marker.on('mouseover', function(e) {
//open popup;
var popup = L.popup()
.setLatLng(e.latlng)
.setContent('Popup')
.openOn(map);
});
นี่ไม่ใช่ปัญหาเฉพาะของ Leaflet แต่เป็นคำถามของ Javascript
เก็บเครื่องหมายของคุณไว้ในคอลเล็กชันแล้วผูกopenPopup
เข้ากับ'mouseover'
เหตุการณ์สำหรับพวกเขาทั้งหมด
ตัวอย่างเช่นกับอาร์เรย์:
var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>
for (var i = 0; i < markers.length; i++) {
var currentMarker = markers[i];
currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}
L.MarkerCluster
ตัวอย่าง ... คำตอบของฉันแสดงให้เห็นอย่างชัดเจนว่าจะผูกคอลเลกชันของป๊อปอัปเมื่อวางเมาส์ไว้ หากคุณต้องการทราบวิธีขอรับคอลเล็กชันจากคลัสเตอร์นี่เป็นอย่างอื่น
หากคุณใช้ Leaflet 1.3.x การผูกคำแนะนำเครื่องมือเป็นวิธีการในตัว
http://leafletjs.com/reference-1.3.0.html#tooltip
var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
polyline.bindTooltip("tool tip is bound");
bindTooltip()
ทำงานกับเครื่องหมายแต่ละตัวเช่นกัน
ในแง่ของการมีวิธีแก้ปัญหาที่ใช้งานได้ "สำหรับตัวทำเครื่องหมายจำนวนมาก" นี่คือสิ่งที่ฉันทำกับข้อมูลจุดแต่ละชั้นที่โหลดจาก GeoJSON:
var layerPopup;
featureLayer.on('mouseover', function(e){
var coordinates = e.layer.feature.geometry.coordinates;
var swapped_coordinates = [coordinates[1], coordinates[0]]; //Swap Lat and Lng
if (map) {
layerPopup = L.popup()
.setLatLng(swapped_coordinates)
.setContent('Popup for feature #'+e.layer.feature.properties.id)
.openOn(map);
}
});
featureLayer.on('mouseout', function (e) {
if (layerPopup && map) {
map.closePopup(layerPopup);
layerPopup = null;
}
});