2016-09-11 52 views
-1

如何顯示單個標記的數據?在Google Maps API marker collector中顯示單個標記的數據

我能夠在Google Maps API markerclusterer羣集上發生鼠標懸停時顯示自定義數據,但無法計算出如何針對單個標記執行相同操作(即,當您放大到羣集,直到看到單個標記標記)。

,顯示數據爲集羣的代碼是:

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

回答

1

添加點擊監聽器google.maps.Marker對象:

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

優秀的感謝。 –

相關問題