[英]Google Maps InfoWindow on Clusters
我有一張帶有很多標記的地圖。 所有這些標記都有一個信息窗口。 使用 Markers Cluster Lib,( http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js ) 我得到了點擊時放大的集群。
有些標記具有完全相同的坐標,因此即使我達到最大縮放,它們也會變成一個簇。 到目前為止一切都很好,除了我還想在單擊集群時打開一個信息窗口,該集群在縮放時從不分裂成標記。 在這個 InfoWindow 中,我想根據它包含的標記顯示信息。
到目前為止,這是我的代碼。 它與標記上的 InfoWindow 一起工作正常,除了在單擊 Clusters 時不顯示 InfoWindow。
function initialize(lat, lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
mapTypeControl: false,
center: myLatlng,
zoom: 14,
maxZonn:15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'idle', function() {
getMarkers(map.getBounds());
});
};
function getMarkers(bounds){
var filter = build_filter();
var bounds = {
'swlat':bounds.getSouthWest().lat(),
'swlng':bounds.getSouthWest().lng(),
'nelat':bounds.getNorthEast().lat(),
'nelng':bounds.getNorthEast().lng()
};
data = {
'bounds': bounds
}
$.ajax({
type: "POST",
dataType: 'json',
async: false,
url: "<?=$x_url;?>",
data: data,
cache: true,
success: function (json) {
addMarkers2Map(json);
}
});
}
function addMarkers2Map(data){
$('#properties_counter').html(data.length);
var markers = [];
for (var i = 0; i < data.length; ++i) {
// set the marker position
var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
console.log(data[i].lat);
// drop the marker
var marker = new MarkerWithLabel({
position: latLng,
map: map,
labelContent: data[i].price,
labelAnchor: new google.maps.Point(27, 35),
title: data[i].title,
labelClass: "map-markers",
zIndex: i
// icon: ' '
});
markers.push(marker);
var infowindow = null;
buildInfoWindow(marker,map,data[i], i);
}
var markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener(markerCluster, 'click', function() {
infowindow.open(map,markerCluster);
});
}
function buildInfoWindow(marker, map, data, index){
var strVar="";
strVar += "<img src=\""+data.main_photo+"\"><br>";
strVar += data.name+"<\/i> | "+data.age+" <i class=\"fa fa-prp\"><\/i> | "+data.gender+" <i class=\"fa fa-check\"><\/i>";
strVar += "<div class=\"avatar-list\">";
strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
strVar += "<\/div>";
strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
strVar += "<\/a>";
var infowindow = new google.maps.InfoWindow({
content: strVar
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
我怎樣才能做到這一點?
向 MarkerClusterer 添加一個“clusterclick”偵聽器,在觸發該事件時打開信息窗口。
代碼片段:
var gm_map; var markerArray = []; var infoWindow = new google.maps.InfoWindow(); function initialize() { var marker, i; var options_googlemaps = { minZoom: 4, zoom: 18, center: new google.maps.LatLng(59.328631, 13.485688), maxZoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false } gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps); var options_markerclusterer = { gridSize: 20, maxZoom: 18, zoomOnClick: false, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }; var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer); google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { var markers = cluster.getMarkers(); var array = []; var num = 0; for (i = 0; i < markers.length; i++) { num++; array.push(markers[i].getTitle() + '<br>'); } if (gm_map.getZoom() <= markerCluster.getMaxZoom()) { infoWindow.setContent(markers.length + " markers<br>" + array); infoWindow.setPosition(cluster.getCenter()); infoWindow.open(gm_map); } }); for (i = 0; i < clusterMarkers.length; i++) { var marker = clusterMarkers[i]; google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infoWindow.setContent(this.getTitle()); infoWindow.open(gm_map, this); } })(marker)); } } google.maps.event.addDomListener(window, 'load', initialize); var clusterMarkers = [ new google.maps.Marker({ position: new google.maps.LatLng(59.381059, 13.504026), map: gm_map, title: "P1220214 1.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.338683, 13.492057), map: gm_map, title: "P1220214 2.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.340715, 13.49631), map: gm_map, title: "P1220214 3.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.327232, 13.487384), map: gm_map, title: "P1220214 4.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.379034, 13.516566), map: gm_map, title: "P1220214 5.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.328631, 13.485688), map: gm_map, title: "P1220214 6.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.328657, 13.485591), map: gm_map, title: "P1220214 7.JPG" }), new google.maps.Marker({ position: new google.maps.LatLng(59.328501, 13.485782), map: gm_map, title: "P1220214 8.JPG" }) ]
.photo-map { background-color: #222222; height: 500px; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <div class="photo-map" id="google-maps"></div>
我最終以這種方式解決了這個問題,添加了以下代碼:
var clusterOptions = {
zoomOnClick: false
}
markerCluster = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
if (map.getZoom() < map.maxZoom ){
map.setCenter(cluster.center_);
map.setZoom(map.getZoom() + 2);
} else {
var content = '';
// Convert the coordinates to an MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var marks_in_cluster = cluster.getMarkers();
console.log(marks_in_cluster);
for (var z = 0; z < marks_in_cluster.length; z++) {
content = makeClusterInfo(marks_in_cluster,z);
}
infowindow.close(); // closes previous open ifowindows
infowindow.setContent(content);
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close()
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.