2016-09-11 1 views
-1

Wie können Sie Daten für einzelne Marker anzeigen?Zeigen Sie Daten für einzelne Marker in Google Maps API an. Markerclusterer

Ich kann benutzerdefinierte Daten anzeigen, wenn ein Mouseover in einem Google Maps-API-Cluster auftritt, kann aber nicht herausfinden, wie dasselbe für einen einzelnen Marker durchgeführt wird (dh wenn Sie in einen Cluster zoomen, bis Sie einen einzelnen sehen) Marker).

Der Code, der Daten für die Cluster zeigt ist:

var markerClusterer = null; 
var map = null; 
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 
    'chco=FFFFFF,008CFF,000000&ext=.png'; 
google.maps.event.addDomListener(window, 'load', initialize); 

function refreshMap() { 
    if (markerClusterer) { 
     markerClusterer.clearMarkers(); 
    } 
    var markers = []; 
    var markerImage = new google.maps.MarkerImage(imageUrl, 
     new google.maps.Size(24, 32)); 
    for (var i = 0; i < numItemsToShow; ++i) { 
     var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     icon: markerImage 
     }); 
     markers.push(marker); 
    } 
    var zoom = parseInt(document.getElementById('zoom').value, 10); 
    var size = parseInt(document.getElementById('size').value, 10); 
    var style = parseInt(document.getElementById('style').value, 10); 
    zoom = zoom == -1 ? null : zoom; 
    size = size == -1 ? null : size; 
    style = style == -1 ? null: style; 

    markerClusterer = new MarkerClusterer(map, markers, { 
     maxZoom: zoom, 
     gridSize: size, 
     styles: styles[style] 
    }); 

    // Respond to mouseover on marker cluster 
    var infoWindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) { 
     // do something with this cluster ... 
     infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue()); 
     infoWindow.setPosition(cluster.getCenter()); 
     infoWindow.open(map); 
    }); 

    // HOW TO RESPOND TO MOUSEOVER ON INDIVIDUAL MARKER? 
} 

Antwort

1

einen Klick Zuhörer auf die google.maps.Marker Objekte hinzufügen:

var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long); 
var marker = new google.maps.Marker({ 
position: latLng, 
icon: markerImage 
}); 
// slightly modified from Google Maps JS API v3 - Simple Multiple Marker Example 
// http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example 
google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(ItemsToShow[i].lat+","+itemsToShow[i].long); 
     infowindow.open(map, marker); 
    } 
})(marker, i)); 
+0

Excellent Dank. –

Verwandte Themen