Infowindows ile Google Maps API Çoklu İşaretçileri

93

Her biri tıklandığında açılan kendi bilgi penceresine sahip birden fazla işaretçi eklemeye çalışıyorum. Bilgi pencerelerinin gelmesini sağlamakta sorun yaşıyorum, denediğimde ya bir bilgi penceresi olmadan sadece bir işaretçi gösteriyor.

Teşekkürler, biraz daha bilgiye ihtiyacın olursa haber ver

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— Stacktraceyo
kaynak
2
İşaretçilerden önce oluşturulan tek bir bilgi penceresi kullanın. Ardından, her işaretçi için tıklama etkinliğiniz doğru şekilde çalışacaktır. contentOlay dinleyicinizin içindeki değişken bu işlev içinde tanımlanmamıştır.
— js1568
1
Hızlı bir yorum olarak, kodunuzu iyi biçimlendirirseniz, okunması çok daha kolaydır.
— paullb
1
@paullb Onu yeniden biçimlendireceğim, bu soruyu 4 yıl önce daha acemi olduğum zamanlarda yazdım :)
— stacktraceyo
Birden fazla işaretçi bilgisi göstermek için bu öğreticiyi kontrol edin Tıklama ve üzerine gelme freakyjolly.com/…
— Kod Casusu

Yanıtlar:

206

Bir kapanış kullanabilirsin. Kodunuzu şu şekilde değiştirin:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));

İşte DEMO

— Mühendis
kaynak
2
Bunu çalıştırdım, ancak başka bir işaretçiye tıkladığımda, başka bir işaretçiye her tıkladığımda sürekli olarak daha fazla bilgi penceresi açmak yerine, daha önce açık olan bilgi penceresinin yerini alan bir bilgi penceresi açacak şekilde kodu nasıl değiştirebilirim?
— raylı
işe yarıyor! ama biri bana neden bu şekilde çalıştığını açıklayabilir mi?
— Lakshay
1
@Lakshay Benzer bir sorunu buradan
— Mühendis
1
bu durumda, haritanın dışına tıkladığınızda bilgi penceresi nasıl kapatılmalıdır?
— Rohit Tigga 02
İç pencere nasıl kapatılır? infowindow.close()çalışmıyor.
— mokiSRB
10

İşte kesinlikle işe yarayacak kod parçacığı. JsFiddle çalışması ve detaylı açıklama için aşağıdaki bağlantıyı ziyaret edebilirsiniz . Mükemmel yakınlaştırmayla Google Haritalar'da birden fazla adres nasıl bulunur?

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— Evaipar
kaynak
6

Kaynak Bağlantısı

Demo Bağlantısı

Aşağıdaki kod, InfoWindow ile Çoklu İşaretçileri gösterecektir . Sen Uncomment kod üzerinde Bilgilerini görüntülemek için olabilir Gelindiğinde yanı

görüntü açıklamasını buraya girin

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— Kod Casusu
kaynak
Bu çözüm için bir gereksinim, bilgi penceresi ve işaretleyici için const kullanılmasıdır, aksi takdirde işe yaramaz ..
— Jim Jimson
2

Bilgi penceresinin kapanmasını da bir olaya bağlamak istiyorsanız, bunun gibi bir şey deneyin

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— Vinayak Kaniyarakkal
kaynak
0 
function setMarkers(map,locations){

for (var i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

Ardından hareket var infowindow = new google.maps.InfoWindow()etmek initialize()fonksiyonu:

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
kaynak
1
google.maps.events.AddListenerolmalıdırgoogle.maps.event.addListener
— Patrick Yan
Initialize () işlevimin içine TypeError: map.infowindow is undefineddahil edersem alırımvar infowindow = new google.maps.InfoWindow();
— invot
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.