গুগল ম্যাপস: উন্মুক্ত ইনফো উইন্ডোজ অটো বন্ধ করবেন?


108

আমার সাইটে , আমি মানচিত্রে বাড়ির চিহ্নিতকারীগুলি রাখতে Google মানচিত্রের API v3 ব্যবহার করছি।

আপনি স্পষ্টভাবে ঘনিষ্ঠ আইকনটি ক্লিক না করে তথ্য উইন্ডো খোলা থাকে। অর্থ, আপনি যদি মানচিত্রের উপর দিয়ে ঘুরে বেড়ান তবে আপনি একবারে 2+ ইনফো উইন্ডো খুলতে পারেন।

প্রশ্ন : আমি কীভাবে এটি তৈরি করব যাতে কেবলমাত্র বর্তমান সক্রিয় ইনফো উইন্ডো খোলা থাকে এবং অন্যান্য সমস্ত ইনফো উইন্ডো বন্ধ থাকে? অর্থ, একবারে 1 টিরও বেশি ইনফো উইন্ডো খোলা থাকবে?


1
আমার পক্ষে এটি কেবলমাত্র একটি ইনফাইন্ডো তৈরি করা এবং এটি আপডেট করা (এটি সামগ্রী এবং অন্যান্য), খোলা এবং বন্ধ এবং শ্রুতিমালা ভাল। তবে আমি নিশ্চিত যে এই পদ্ধতিটি সর্বদা প্রযোজ্য নয়।
andrii

উত্তর:


153

ইনফো উইন্ডোগুলির জন্য একটি ঘনিষ্ঠ () ফাংশন রয়েছে। কেবল সর্বশেষ খোলা উইন্ডোটি ট্র্যাক করুন, এবং একটি নতুন উইন্ডো তৈরি হওয়ার পরে এটিতে ঘনিষ্ঠ ফাংশনটি কল করুন।

এই ডেমোটির কার্যকারিতা রয়েছে যা আপনি খুঁজছেন। আমি এটি মানচিত্রের API V3 ডেমো গ্যালারীটিতে পেয়েছি ।


4
শুধুমাত্র সর্বশেষ খোলা উইন্ডোটির উপর নজর রাখার পরামর্শের জন্য উত্সাহিত। অ-মস্তিষ্কের মতো দেখায়, তবে লোকে সেই জিনিসগুলি ভুলে যায় ...
রামি ব্রেটন

1
আমি ঠিক একই কৌশলটি ব্যবহার করেছি। ধন্যবাদ ক্রিস। এটি আমার জন্য প্রয়োজনীয় ছিল, কারণ আমি কেবলমাত্র একটির পরিবর্তে তথ্যবাইন্ডো অবজেক্টগুলির একটি অ্যারে ব্যবহার করছি যা প্রাসঙ্গিক তথ্যটি চক্রটি ধরে এবং আঁকড়ে ধরে। প্রতিটি ইনফো উইন্ডোর নিজস্ব আলাদাভাবে আপডেট করার তথ্য রয়েছে, তাই আমি এই কৌশলটি বেশ দরকারী বলে মনে করি।
ইন্টারফেসগুয়ে

2
"এই ডেমো" লিঙ্কটি নষ্ট হয়েছে
ব্রেন্ডন হুইটিং

64

অনেকগুলি ইনফাইন্ডো ব্যবহার করে এর জন্য বিকল্প সমাধান: ভেরিয়েবলের মধ্যে পূর্বের খোলা ইনফাইন্ডো সংরক্ষণ করুন এবং নতুন উইন্ডোটি খুললে এটি বন্ধ করুন

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}

3
এটার মত. বুঝতে এবং প্রয়োগ করা সহজ
আমির আফ্রিদি

6
আমার নির্দোষকে ক্ষমা করবেন, তবে ডব্লিউটিএফ বেস?
শব্দসুবিহীন

গুগল মানচিত্র ভি 3 এ কেন এটি ডিফল্ট আচরণ নয় তা আমি বুঝতে পারি না ...
মিঃ ওয়াশিংটন

আমি এ পর্যন্ত খুঁজে পেয়েছি সেরা এবং সহজ সমাধান। ধন্যবাদ!
ইরতেজা আসাদ

27
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

এটি প্রতিটি ক্লিক করা চিহ্নিতকারীর কাছে তথ্য উইন্ডোটির চারপাশে "সরানো" হবে, ফলস্বরূপ এটি নিজেই বন্ধ হয়ে যাবে, তারপরে পুনরায় খোলা হবে (এবং ভিউপোর্টটি ফিট করার জন্য প্যানিং) তার নতুন স্থানে। পছন্দসই প্রভাব দেওয়ার জন্য এটি খোলার আগে এর বিষয়বস্তুগুলিকে পরিবর্তন করে। এন চিহ্নিতকারীদের জন্য কাজ করে।


1
দ্রুত দ্রষ্টব্য: infowindow.open () এ পুনরাবৃত্তি কলগুলি যথেষ্ট; উইন্ডোটি প্রথমে বন্ধ করার দরকার নেই।
এরিক নগুয়েন

3
@ এরিক, আপনি প্রযুক্তিগতভাবে সঠিক হওয়ার পরে, আমি একটি বাগ লক্ষ্য করেছি যা কখনও কখনও তথ্য উইন্ডোগুলিকে তাদের শেষ অবস্থানে দেখায়। জোর করে বন্ধ প্রথম পরাজয় বাগ বলেন।
জোয়েল মেলন

22

আমার সমাধান।

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

3
এটি সত্যই মার্জিত - কেবলমাত্র একটি একক ইনফাইন্ডো ব্যবহার করা এবং সামগ্রী পরিবর্তন করা পূর্ববর্তীটির উপর নজর রাখতে / বন্ধ রাখতে এড়ানো হয়।
নিক এফ

এই সমাধানটি প্রকৃতপক্ষে খুব মার্জিত এবং একটি কবজির মতো কাজ করে। +1
সেবাস্তিয়ান ব্রেইট

9

এই লিঙ্কটি থেকে http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

টিও: এটি করার সহজতম উপায় হ'ল ইনফো উইন্ডো অবজেক্টটির একটি উদাহরণ থাকা উচিত যা আপনি বারবার ব্যবহার করেন use আপনি যখন নতুন মার্কারকে ক্লিক করেন তখন তথ্য উইন্ডোটি যেখানে সরানো হয়েছে সেখান থেকে "সরানো" হয়ে নতুন মার্কারের দিকে নির্দেশ করার জন্য।

সঠিক সামগ্রী সহ এটিকে লোড করতে এর সেটকন্টেন্ট পদ্ধতিটি ব্যবহার করুন।


আমি বিশ্বাস করি না যেহেতু আমি গুগল ম্যাপস ভি 3 এপিআই ব্যবহার করছি
টেড

এছাড়াও, আপনি যে নিবন্ধটি সংযুক্ত করেছেন
টেড

আমি বেশ কয়েকটি সাইটের জন্য একই ফ্যাশনে একটি একক ইনফিন্ডো ব্যবহার করেছি। একটিতে ক্লিক করুন, খোলাটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
কিথ অ্যাডলার

4
আপনি কীভাবে একক ইনফো উইন্ডোর সাথে একাধিক চিহ্ন যুক্ত করবেন?
টেড

7

সক্রিয় উইন্ডোটির জন্য একটি ভেরিয়েবল ঘোষণা করুন

var activeInfoWindow; 

এবং এই কোডটি চিহ্নিতকারী শ্রোতার সাথে আবদ্ধ করুন

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

ধন্যবাদ, মানচিত্রের যে কোনও জায়গায় ক্লিক করার সময় এটি সত্যিই কাজ করে।
ভারিন্দর সিং বৈদওয়ান

চিয়ারস ড্যু, সমস্ত পরামর্শের মধ্যে, এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে এবং এটি পরিষ্কার এএফ।
ম্যাথু এলিস

4

বন্ধ () ফাংশনটি ব্যবহার করার পাশাপাশি আরও একটি সহজ উপায় রয়েছে। আপনি যদি ইনফো উইন্ডো বৈশিষ্ট্য সহ কোনও ভেরিয়েবল তৈরি করেন আপনি অন্যটি খুললে তা স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}

1
var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}

থ্যাঙ্কস, যখন ঠিক কোনও মানচিত্রে কোনও মার্কারকে ক্লিক করা হয়নি তখন আমাকে ইনফাইন্ডোটি বন্ধ করতে হবে
ভিআরসি

1

কেমন -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

তারপরে আপনি কেবল এটির উপরে ঘোরাতে পারেন এবং এটি নিজেই বন্ধ হয়ে যাবে।


এটি একটি আকর্ষণীয় কাজ কিন্তু এটি প্রশ্নের উত্তর দেয় না এবং কেবলমাত্র ডিভাইসগুলিতে কাজ করে না।
লি

1

বর্তমানে কোন তথ্য উইন্ডোটি খোলা আছে তার উপর নজর রাখতে আমি শীর্ষে একটি ভেরিয়েবল সংরক্ষণ করেছি, নীচে দেখুন।

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 

[কাউন্টার] এখানে কি করছে?
লি

0

আপনি যদি লুপের জন্য অনেক মার্কার ব্যবহার করে থাকেন তবে আমি এখানে যা ব্যবহার করেছি তা এখানে রয়েছে (জাজানো)। আপনি প্রতিটি চিহ্নিতকারীকে একটি সূচক সেট করতে পারেন এবং প্রতিবার উইন্ডো খোলার পরে সেই সূচিটি সেট করতে পারেন। পূর্বে সংরক্ষিত সূচকটি বন্ধ করা হচ্ছে:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

-1
var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.