แสดงป๊อปอัพเมื่อวางเมาส์ไม่ใช่คลิกโดยใช้ Leaflet ใช่ไหม


37

เป็นไปได้ใน Leaflet ที่ป๊อปอัปเปิดขึ้นเมื่อวางเมาส์ไม่ใช่คลิก?

สิ่งนี้ใช้ได้กับเครื่องหมายเพียงครั้งเดียว แต่ฉันต้องการเครื่องหมายจำนวนมากขึ้น:

marker.on('mouseover', function(e){
    marker.openPopup();
});

1
หากคุณมีสองคำถามโปรดเปิดสองหัวข้อเพื่อให้สามารถตอบแยกต่างหาก
underdark

คำตอบ:


43

หากคุณต้องการที่จะแสดงป๊อปอัพสำหรับเครื่องหมายที่คุณสามารถใช้เครื่องหมายวิธี bindPopup

จากนั้นคุณสามารถควบคุมได้มากขึ้นและมันจะถูกผูกไว้กับเครื่องหมายของคุณโดยอัตโนมัติ

ในตัวอย่างด้านล่างคุณสามารถแสดงป๊อปอัพเมื่อผู้ใช้เลื่อนเมาส์ไปและซ่อนไว้เมื่อผู้ใช้เลื่อนเมาส์ออก:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

หมายเหตุ: คุณอาจพบปัญหาเกี่ยวกับการปิดป๊อปอัปเมื่อคุณวางเมาส์บนป๊อปอัปเองดังนั้นคุณอาจต้องปรับป๊อปอัปใน (ดูการตั้งค่าป๊อปอัพ) เพื่อแสดงป๊อปอัปของคุณออกไปเล็กน้อย หายไปง่ายเกินไป


4
โซลูชันสำหรับทำให้ป๊อปอัปปรากฏเมื่อโฉบลงไป - jsfiddle.net/sowelie/3JbNY
rob-gordon

9

สิ่งนี้จะช่วยในการแสดงป๊อปอัพที่ตัววางเมาส์เครื่องหมาย

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

1
ขอบคุณ! รหัสนี้ช่วยฉันในบางสิ่งที่ไม่เกี่ยวข้องกับคำถามนี้
Abbafei

6

นี่ไม่ใช่ปัญหาเฉพาะของ 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));
}

ความคิดเห็นในความคิดเห็นมากกว่าคำตอบ: ฉันคิดว่าการใช้งานป๊อปอัปที่เปิดโดยโฮเวอร์บนแผนที่ซึ่งคำจำกัดความของเคอร์เซอร์ของคุณเร่ร่อนไปรอบ ๆ เป็นที่น่าสงสัย คุณต้องการให้ผู้ใช้ดึงความสนใจระหว่างเครื่องหมายเพื่อบรรลุสิ่งที่พวกเขาต้องการ แต่ถูกซ่อนอยู่หลังป๊อปอัปทุกครั้งที่พวกเขาพยายามเลื่อนเคอร์เซอร์ไปยังเป้าหมายของพวกเขา?
MattiSG

นี่ไม่ใช่ตัวเลือกของฉันโชคไม่ดี ฉันมีเครื่องหมายที่เก็บไว้เช่น L.MarkerClusterGroup ใหม่ที่มี Leaflet MarkerCluster: var markers = ใหม่ L.MarkerClusterGroup (); การเขียนโค้ดที่คุณเขียนจะใช้ได้หรือไม่
ต่อต้านโฟลว์

@againstflow Erm คุณควรเปลี่ยนคำถามของคุณแล้ว คุณไม่เพียง แต่ขอให้เปิดเครื่องหมายบนโฮเวอร์เท่านั้น แต่คุณจะถามวิธีวนซ้ำเครื่องหมายในL.MarkerClusterตัวอย่าง ... คำตอบของฉันแสดงให้เห็นอย่างชัดเจนว่าจะผูกคอลเลกชันของป๊อปอัปเมื่อวางเมาส์ไว้ หากคุณต้องการทราบวิธีขอรับคอลเล็กชันจากคลัสเตอร์นี่เป็นอย่างอื่น
MattiSG

6

หากคุณใช้ 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");

1
น่าอัศจรรย์ หลีกเลี่ยงกระวนกระวายใจ "mouseover" / "mouseout" ทั้งหมดที่อธิบายไว้ข้างต้น
นิค K9

bindTooltip()ทำงานกับเครื่องหมายแต่ละตัวเช่นกัน
เอส. Baggy

4

ในแง่ของการมีวิธีแก้ปัญหาที่ใช้งานได้ "สำหรับตัวทำเครื่องหมายจำนวนมาก" นี่คือสิ่งที่ฉันทำกับข้อมูลจุดแต่ละชั้นที่โหลดจาก 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;
    }
});

แค่อยากรู้อยากเห็นวัตถุประเภทใดเป็นคุณลักษณะเลเยอร์ ดูเหมือนว่านี่เป็นทางออกที่ดี
Behr
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.