Google Maps API Infowindows'lu Birden Fazla İşaretçi

Her biri tıklandığında beliren kendi iç içe geçirme işaretiyle birden fazla işaretçi eklemeye çalışıyorum. İnişler geldiğinde sorun yaşıyorum, denediğimde ya bir infowindow olmadan sadece bir işaretleyici gösterir.Google Maps API Infowindows'lu Birden Fazla İşaretçi

sayesinde, bir kapatma kullanabilirsiniz biraz daha bilgi

<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>

kaynak

2012-06-19 StackTraceYo

Kullanımı gibi belirteçlerin önce oluşturulan yalnızca BİR InfoWindow şey deneyin. Ardından, her bir işaretçi için tıklama etkinliğiniz doğru olarak çalışır. Etkinlik dinleyicinizin içerisindeki "içerik" değişkeni bu işlev içinde tanımlanmamıştır. – js1568

teşekkürler alot man – StackTraceYo

Ayrıntı blogu: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

gerekiyorsa bana bildirin. Sadece bu gibi kodunuzu değiştirin:

İşte

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

DEMO

kaynak

2012-06-19 18:09:23 Engineer

teşekkürler, gerçekten çok memnun oldum – StackTraceYo

Çalıştığımı anladım ama nasıl tıklarım? başka bir işaretleyici, daha önce açık olan infowindow'un yerine başka bir işaretçiyi tıklattığımda sürekli olarak daha fazla infowindows açmak yerine değiştiren bir infowindow açar? – railsy

+11

Birkaç çözümü kullanarak demo güncellendi - http://jsfiddle.net/ZFvDV/ –

-1

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

}); 

} 
}

Sonra initialize() işlevine var infowindow = new google.maps.InfoWindow() hareket: İşte

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) 

    }

kaynak

2012-06-19 18:11:33 js1568

'google.maps.events.AddListener 'google.maps.event.addListener' olmalıdır –

TürError: map .infowindow undefined' ise şunu ekler: var infowindow = new google.maps.InfoWindow(); 'initialize() işlevimin içinde – invot

kesin çalışacak kod parçacığı olduğunu . JsFiddle ve açıklamalarını ayrıntılı bir şekilde çalışmak için link'u ziyaret edebilirsiniz. Ayrıca bazı olaya infowindow kapanmasını bağlamak istiyorsanız How to locate multiple addresses on google maps with perfect zoom

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

kaynak

2014-03-09 17:28:04 evaipar

, bu

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

kaynak

2016-07-18 14:32:53

Google Maps API Infowindows'lu Birden Fazla İşaretçi

cevap

İlgili konular