creare InfoWindow per gli indicatori cluster utilizzando Google Maps v3

Sto sviluppando una mappa che raggrupperà i pin per impedire un pin troppo affollato, ma volevo creare una finestra di informazioni che elencherà tutti i marker quando clicco sul marker, ho provato a ottenere un aiuto in giro e ho scoperto che posso farlo usando marker.getTitle() ma questo non mi sta aiutando perché sto usando l'oggetto makrewithLable e non uso il titolo, la mia domanda è lì per quale motivo aggiungere il titolo al marcatore o come preferisco per usare l'etichetta invece di elencarli in infowindow. ecco una copia del mio lavoro.creare InfoWindow per gli indicatori cluster utilizzando Google Maps v3

google.setOnLoadCallback(initialize); 
var globalMarker = []; 
var map; 

    function initialize() { 
    var center = new google.maps.LatLng(45.4214, -75.6919); 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     disableDoubleClickZoom: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 
    var infowindow = new google.maps.InfoWindow(); 
    for(i=0; i<50; i++) { 
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5); 
    //var latLng = new google.maps.LatLng(45.4214, -75.6919) 
    markers[i] = new MarkerWithLabel({ 
     position: latLng, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "Marker ID = "+i, 
     labelAnchor: new google.maps.Point(30, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75} 
    }); 
     markers.push(markers); 
    makeDiv(i, 15, "Marker #"); 
    google.maps.event.addListener(markers[i], 'click', function(e) { 
    infowindow.setContent('Marker postion: ' + this.getPosition()); 
    infowindow.open(map, this);}); 
    } 
    var clusterOptions = { zoomOnClick: false } 
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions); 
    globalMarker = markers.slice(); 
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
var content = ''; 

// Convert lat/long from cluster object to a usable MVCObject 
var info = new google.maps.MVCObject; 
info.set('position', cluster.center_); 

//---- 
//Get markers 
var markers = cluster.getMarkers(); 

var titles = ""; 
//Get all the titles 
for(var i = 0; i < markers.length; i++) { 
    titles += markers[i].getTitle() + "\n"; 
} 
//---- 


infowindow.close(); 
infowindow.setContent(titles); //set infowindow content to titles 
infowindow.open(map, info); 
}); 
    } 

    function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>'; 
    } 

    function zoomIn(index, zoomLevel) { 
    map.setCenter(globalMarker[index].getPosition()); 
    map.setZoom(zoomLevel); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

Grazie

fonte

2012-05-09 jprbest

Cosa vuol dire 'aggiungere un title'? Vuoi dire che l'etichetta rossa del tuo marcatore non è presente? Ho testato il tuo codice ed è OK. Hai ricevuto errori nella console JS? C'è anche un'opzione 'title' che è un suggerimento hover, forse è quello che vuoi? –

no l'etichetta di colore rosso è lì ma voglio aggiungere il titolo come var marker = new google.maps.Marker ({ position: myLatlng, title: "Hello World!" }); perché voglio essere in grado di leggere tutti i marcatori sotto un cluster per aggiungerli in una finestra di input come: var titles = ""; // Ricevi tutti i titoli per (var i = 0; i jprbest

La parte difficile sarà la definizione di un cluster. Intendi anche che tutti i marcatori in un cluster definito aprano la stessa finestra? –

Il cambiamento chiave era titles += markers[i].labelContent + "\n";. (È possibile utilizzare la notazione a punti o markers[i]["labelContent"] per fare riferimento a qualsiasi proprietà impostata dall'utente). Ho anche modificato la parte markers.push(markers) e che quando si cambia lo zoom la finestra scompare (perché è probabile che il numero del cluster cambi). Tutto il resto è fantastico!

http://jsfiddle.net/ErYub/

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body, #map { margin: 0; padding: 0; height: 100% } 

.labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 90px;  
    border: 2px solid black; 
    white-space: nowrap; 
    } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <script type="text/javascript"> 

var globalMarker = []; 
var map; 

    function initialize() { 
    var center = new google.maps.LatLng(45.4214, -75.6919); 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     disableDoubleClickZoom: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 


    var infowindow = new google.maps.InfoWindow(); 
    for(i=0; i<50; i++) { 
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5); 
    //var latLng = new google.maps.LatLng(45.4214, -75.6919) 
    marker = new MarkerWithLabel({ 
     position: latLng, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "Marker ID = "+i, 
     labelAnchor: new google.maps.Point(30, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75} 
    }); 
     markers.push(marker); 

    makeDiv(i, 15, "Marker #"); 
    google.maps.event.addListener(markers[i], 'click', function(e) { 
    infowindow.setContent('Marker postion: ' + this.getPosition()); 
    infowindow.open(map, this);}); 
    } 
    var clusterOptions = { zoomOnClick: false } 
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions); 
    globalMarker = markers.slice(); 
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
var content = ''; 

// Convert lat/long from cluster object to a usable MVCObject 
var info = new google.maps.MVCObject; 
info.set('position', cluster.center_); 

//---- 
//Get markers 
var markers = cluster.getMarkers(); 

var titles = ""; 
//Get all the titles 
for(var i = 0; i < markers.length; i++) { 
    titles += markers[i].labelContent + "\n"; 
} 
//---- 


infowindow.close(); 
infowindow.setContent(titles); //set infowindow content to titles 
infowindow.open(map, info); 

google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() }); 

}); 
    } 

    function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>'; 
    } 

    function zoomIn(index, zoomLevel) { 
    map.setCenter(globalMarker[index].getPosition()); 
    map.setZoom(zoomLevel); 
    } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <div id="sidebar"></div> 
    </body> 
</html>

fonte

2012-05-09 18:31:59

Grazie funziona – jprbest

@Heitor Chang, Posso aggiungere un link sull'etichettaContent? Se è così, allora come? – Emu

creare InfoWindow per gli indicatori cluster utilizzando Google Maps v3

risposta

Problemi correlati