Soru Google Haritalar API'sı v3, her bir işaretçiye bir InfoWindow ekleme


NOT: Google Haritalar API'sının v3'ünü kullanıyorum

Haritaya koyduğum her işaretçiye bir bilgi penceresi eklemeye çalışıyorum. Şu anda şu kodla yapıyorum:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        var marker = new google.maps.Marker({map: map, position: point, clickable: true});
        tracks[racer_id].markers[i] = marker;
        var info = new google.maps.InfoWindow({
            content: '<b>Speed:</b> ' + values.inst + ' knots'
        });
        tracks[racer_id].info[i] = info;
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
    }
    track_coordinates.push(point);
    bd.extend(point);
}

Sorun, bir işaretçiyi tıkladığımda sadece eklenen son işaretleyici için bilgi penceresini görüntülediğidir. Ayrıca sadece açık olması için, bilgi işareti, işaretleyicinin tıklanmadığı son işaretleyicinin yanında görünür. Benim sorunum addListener bölümünde olduğunu hayal ediyorum ama postitive değilim. Herhangi bir fikir?


44
2017-07-01 14:13


Menşei


Etkinlik kapanışlarını kullan ... Bu, v3'te nasıl yapılır? developers.google.com/maps/documentation/javascript/examples/... - David


Cevaplar:


Yaşıyorsun çok yaygın bir kapanma problemi içinde for in döngü:

Kapanmış olan değişkenler, aynı tek ortamı paylaşırlar. click geri arama addListener denir, döngü kendi kursu ve info son nesne olacak son nesneyi gösteren değişken bırakılacak InfoWindow yarattı.

Bu durumda, bu sorunu çözmenin kolay bir yolu sizin Marker nesne ile InfoWindow:

var marker = new google.maps.Marker({map: map, position: point, clickable: true});

marker.info = new google.maps.InfoWindow({
  content: '<b>Speed:</b> ' + values.inst + ' knots'
});

google.maps.event.addListener(marker, 'click', function() {
  marker.info.open(map, marker);
});

Kapanışların nasıl çalıştığını bilmiyorsanız, bu oldukça zor bir konu olabilir. Kısa bir giriş için aşağıdaki Mozilla makalesine göz atabilirsiniz:

Ayrıca, v3 API'sinin birden çok kullanıcıya izin verdiğini de unutmayın. InfoWindowharita üzerinde. Eğer sadece bir tane sahip olmayı düşünüyorsan InfoWindow o zaman görünür, bunun yerine bir tek kullanmalısınız InfoWindow Nesnesi tıklattıktan sonra işaretleyiciyi tıklattığınızda açın ve içeriğini değiştirin.Kaynak).


78
2017-07-01 15:17



Bu kod snippet'ini nereye takmam gerektiği hakkında daha fazla bilgi verir misiniz? Döngü için mi yoksa for döngüsünden önce mi yapıldı? Biraz kafam karıştı. - uday
Kod snippet'ini eklemeniz gerekiyor içeride döngü için;) - Tilt


Kullanabilirsiniz this olayda:

google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map);
    // this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});

34
2018-05-18 07:21



Bu doğru cevap olmalı. @DanielVassallo cevabı onunla ilgili aynı sorundan muzdarip. - Arivan Bastos
Bu benim için de çalıştı ... 'Bu' anahtar oldu. - Richard N
Harika çalışıyor ama yapmak zorundaydım this.info.open(marker_map, this); - askilondz
@askilondz teşekkürler, cevap güncelleme. - ostapische
kullanım this.info.open(marker_map,this); bu işe sahip olmak. - Power Engineering


Add_marker'ın hala bir kapatma sorunu var, google.maps.event.addListener kapsamının dışındaki marker değişkenini kullanmasına neden oluyor.

Daha iyi bir uygulama şöyle olurdu:

function add_marker(racer_id, point, note) {
    var marker = new google.maps.Marker({map: map, position: point, clickable: true});
    marker.note = note;
    google.maps.event.addListener(marker, 'click', function() {
        info_window.content = this.note;
        info_window.open(this.getMap(), this);
    });
    return marker;
}

Ayrıca haritayı işaretçiden de kullandım, bu şekilde google harita nesnesini geçmenize gerek yok, muhtemelen haritanın işaretli olduğu haritayı kullanmak isteyebilirsiniz.


9
2017-07-27 09:47



Vaov! İki saatten fazla bir süredir takıldım! kapsam dışı işaretleyicinin kullanılacağını bilmiyordum! Teşekkürler bir ton! - Nandita Damaraju


Hey herkes. Bunun en uygun çözüm olup olmadığını bilmiyorum, ancak gelecekte insanlara yardım etmesini ummak için buraya yollayacağımı düşündüm. Değiştirilmesi gereken bir şey görürseniz lütfen yorum yapın.

Benim döngülerim şimdi:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        tracks[racer_id].markers[i] = add_marker(racer_id, point, '<b>Speed:</b> ' + values.inst + ' knots<br /><b>Invalid:</b> <input type="button" value="Yes" /> <input type="button" value="No" />');
    }
    track_coordinates.push(point);
    bd.extend(point);
}

Ve add_marker olarak tanımlanır:

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

function add_marker(racer_id, point, note) {
    var marker = new google.maps.Marker({map: map, position: point, clickable: true});
    marker.note = note;
    google.maps.event.addListener(marker, 'click', function() {
        info_window.content = marker.note;
        info_window.open(map, marker);
    });
    return marker;
}

İnfo_window özelliğini kapatmak için info_window.close () öğesini kullanabilirsiniz. Umarım bu birisine yardım eder.


1
2017-07-01 17:49





Earth eklenti API'leri için, balonun döngü dışında olması ve her bir yer işareti için benzersiz içerik elde etmek üzere sayacınızı işleve aktarın!

function createBalloon(placemark, i, event) {
            var p = placemark;
            var j = i;
            google.earth.addEventListener(p, 'click', function (event) {
                    // prevent the default balloon from popping up
                    event.preventDefault();
                    var balloon = ge.createHtmlStringBalloon('');
                    balloon.setFeature(event.getTarget());

                    balloon.setContentString('iframePath#' + j);

                    ge.setBalloon(balloon);
            });
        }

1
2018-04-05 23:39





Benim durumumda (Javascript insidde Razor kullanarak) Bu bir Foreach döngüsünün içinde mükemmel bir şekilde çalıştı

google.maps.event.addListener(marker, 'click', function() {
    marker.info.open(map, this);
});

1
2018-06-29 02:50





Bunu dene:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        var marker = new google.maps.Marker({map: map, position: point, clickable: true});
        tracks[racer_id].markers[i] = marker;
        var info = new google.maps.InfoWindow({
            content: '<b>Speed:</b> ' + values.inst + ' knots'
        });
        tracks[racer_id].info[i] = info;
        google.maps.event.addListener(tracks[racer_id].markers[i], 'click', function() {
            tracks[racer_id].info[i].open(map, tracks[racer_id].markers[i]);
        });
    }
    track_coordinates.push(point);
    bd.extend(point);
}

0
2017-07-01 14:24



Haha bunu zaten denedim. Sadece tekrar denedim ve maalesef hala çalışmıyor. - blcArmadillo
Sorun burada i hala bir kapatma içinde kapalı olan değişken. Ne zaman click geri arama denir i Değişkenin son maddesine işaret eden değişken, dolayısıyla info[i].open hala son açacak InfoWindow. - Daniel Vassallo