লিফলেট ব্যবহার করে ক্লিক করে নয়, মাউস-ওভারে পপআপ দেখানো হচ্ছে?


37

লিফলেটে কী পপআপ মাউস-ওভারে খোলে, ক্লিকে নয়?

এটি একবারে মাত্র একটি চিহ্নিতকারীর জন্য কাজ করছে, তবে বিপুল সংখ্যক চিহ্নিতকারীর জন্য আমার এটি দরকার:

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

1
আপনার যদি দুটি প্রশ্ন থাকে তবে দয়া করে দুটি থ্রেড খুলুন যাতে তাদের আলাদাভাবে উত্তর দেওয়া যায়।
underdark

উত্তর:


43

যদি আপনাকে কোনও চিহ্নিতকারীর জন্য পপআপ দেখাতে হয় তবে আপনি চিহ্নিতকারীদের বাইন্ডপপআপ পদ্ধতিটি ব্যবহার করতে পারেন।

তারপরে আপনার আরও নিয়ন্ত্রণ থাকবে এবং এটি স্বয়ংক্রিয়ভাবে আপনার চিহ্নিতকারীকে আবদ্ধ হবে।

নীচের উদাহরণে আপনি পপআপটি যখন ব্যবহারকারী মাউসগুলি শেষ করতে পারবেন এবং ব্যবহারকারী মাউসগুলি আউট করার পরে এটি লুকিয়ে রাখতে পারবেন:

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

দ্রষ্টব্য: আপনি পপআপগুলি নিজেই পপআপের উপর মাউস করার সময় পপআপগুলি বন্ধ হয়ে যাওয়ার বিষয়ে সমস্যা তৈরি করতে পারে তাই আপনার পপআপগুলি মার্কার থেকে খানিক দূরে দূরে দেখানোর জন্য আপনাকে পপআপ অ্যাঙ্করটি সামঞ্জস্য করতে হবে (পপআপ সেটিংস দেখুন) যাতে এটি না ঘটে খুব সহজেই অদৃশ্য হয়ে যায়।



9

এটি মার্কার মাউসওভারে পপআপ প্রদর্শন করতে সহায়তা করবে

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

1
ধন্যবাদ! এই কোডটি এই প্রশ্নের সাথে সম্পর্কিত না এমন কিছুতে আমাকে সহায়তা করেছিল।
আব্বাফাই

6

এটি লিফলেট-নির্দিষ্ট সমস্যা নয়, বরং জাভাস্ক্রিপ্টের প্রশ্ন।

আপনার চিহ্নিতকারীগুলিকে একটি সংগ্রহে সংরক্ষণ করুন এবং তারপরে তাদের সবার জন্য 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));
}

উত্তরের পরিবর্তে একটি মন্তব্যে মতামত: আমি মনে করি যে কোনও মানচিত্রে ঘোরা-খোলা পপআপগুলির ব্যবহারযোগ্যতা, যেখানে সংজ্ঞা দিয়ে আপনার কার্সার প্রচুর পরিমাণে ঘুরে বেড়ায়, তা প্রশ্নবিদ্ধ। আপনি কি সত্যিই চান যে আপনার ব্যবহারকারীরা চিহ্নিতকারীদের মধ্যে শেষের দিকে যেটি চান তার সাথে যোগাযোগ করতে চান কিন্তু যখনই তারা তাদের কার্সারকে তাদের লক্ষ্যের দিকে নিয়ে যাওয়ার চেষ্টা করেন তখন সর্বদা পপআপগুলির আড়ালে চলে যায়?
ম্যাটিএসজি

দুর্ভাগ্যক্রমে এটি আমার পছন্দ নয়। লিফলেট মার্কারক্লাস্টারের সাথে আমি নতুন এল.মার্কারক্লাস্টারগ্রুপের মতো চিহ্নিতকারী রেখেছি: var মার্কার্স = নতুন এল.মার্কারক্লাস্টারগ্রুপ (); আপনি কোডিং এর জন্য কাজ লিখতে হবে?

@ গেইনস্ট্লো ফ্লো এর্ম, আপনার প্রশ্নটি পরিবর্তন করা উচিত then আপনি কেবল হোভারে মার্কার খুলতে বলছেন না, L.MarkerClusterউদাহরণস্বরূপ কীভাবে চিহ্নিতকারীদের উপরে পুনরাবৃত্তি করবেন তা আপনি জিজ্ঞাসা করছেন … আমার উত্তরটি পরিষ্কারভাবে দেখায় যে কীভাবে হোভারে পপআপগুলির সংকলনকে আবদ্ধ করা যায়। আপনি যদি গুচ্ছ থেকে সংগ্রহ সংগ্রহ করতে চান তা জানতে চান, এটি অন্য কিছু।
ম্যাটিএসজি

6

আপনি যদি লিফলেট ১.৩.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
ফ্যান্টাস্টিক। সম্পূর্ণরূপে উপরে বর্ণিত "মাউসওভার" / "মাউসআউট" জিটারটি এড়িয়ে চলে।
নিক কে 9

bindTooltip()পৃথক চিহ্নিতকারীগুলিতেও কাজ করে।
এস বাগি

4

"বিপুল সংখ্যক চিহ্নিতকারীদের জন্য" কাজ করে এমন একটি সমাধান থাকার ক্ষেত্রে, জিওজেএসন থেকে লোড হওয়া পয়েন্ট ডেটার প্রতিটি স্তরের জন্য আমি এটি করি:

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;
    }
});

শুধু কৌতূহলী, বৈশিষ্ট্য লাইয়ার কী ধরণের অবজেক্ট? দেখে মনে হচ্ছে এটি দুর্দান্ত সমাধান।
বেহর
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.