GoogleMaps MarkerClusterer InfoWindow Position

Question

У меня проблема с положением информационного окна markercluster. Он не отображается в позиции маркера. Вместо этого он расположен в верхнем левом углу карты. Вот мой код:

<script type="text/javascript"> 
    function initialize(cities) { 
    var mapOptions = { 
     center: new google.maps.LatLng(48.220, 15.199), 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var markers=[]; 
    var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false}); 

    //markerCluster should be always above the geocoder--> 
    geocoder = new google.maps.Geocoder(); 

    for (var i = 0; i < cities.length; i++) { 
     var city = cities[i]; 
     geocoder.geocode({'address': city.city+" Niederösterreich"}, function(results, status){ 
     if (status == google.maps.GeocoderStatus.OK) { 
     position=results[0].geometry.location; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: position, 
     title: "Ort: "+city.city + "\nBeitrag: " + city.title +"\nRed.: "+ city.reporter +"\nDatum: "+ city.storydate, 
     }); 
     // below code alway lies inside the loop 
     markers.push(marker); 
     markerCluster.addMarker(marker); 
     } 
     }); 
    }; 

     // Listen for a cluster to be clicked 
     google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
     var markers = markerCluster.getMarkers(); 

     var content = ''; 
     for (var i = 0; i < markers.length; i++) { 
      var marker = markers[i]; 
      content += marker.title; 
      content += ("<br>"); 
     }; 
     // Convert lat/long from cluster object to a usable MVCObject 
     var info = new google.maps.MVCObject; 

     var infowindow = new google.maps.InfoWindow(); 
     // infowindow.setPosition(this.markerCluster.getCenter()); 
     // infowindow.setPosition(latLng); 
     infowindow.close(); 
     infowindow.setContent(content); 
     infowindow.open(map, info); 
     google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() }); 
     }); 

    } 
    </script> 

Answer 1

Ваш MVCObject не имеет каких-либо свойства. Согласно documentation, если вы передадите необязательный аргумент anchor в функцию .open, он должен открыть свойство позиции LatLng, а ваш нет (поскольку он не имеет каких-либо свойств, он не может разоблачить).

открытым (не карта: Карта | StreetViewPanorama, якорь: MVCObject?)

Возвращаемое значение: Нет

Открывает эту InfoWindow на данной карте. Необязательно, InfoWindow может быть связан с привязкой. В базовом API единственным анкером является класс Marker. Тем не менее, якорь может быть любым MVCObject, который предоставляет свойство позиции LatLng и, возможно, свойство Point anchorPoint для вычисления pixelOffset (см. InfoWindowOptions). AnchorPoint - это смещение от положения якоря до кончика InfoWindow.

Самое простое решение не использовать anchor аргумент, установить положение InfoWindow непосредственно.

google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) { 
    var markers = cluster.getMarkers(); 

    var content = ''; 
    for (var i = 0; i < markers.length; i++) { 
     var marker = markers[i]; 
     content += marker.title; 
     content += ("<br>"); 
    } 
    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setPosition(cluster.getCenter()); 
    infowindow.setContent(content); 
    infowindow.open(map); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     infowindow.close(); 
    }); 
}); 

proof of concept fiddle

фрагмент кода:

var geocoder; 
 
var markers = []; 
 

 
function initialize(cities) { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(48.220, 15.199), 
 
    zoom: 9, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    zoomOnClick: false 
 
    }); 
 

 
    //markerCluster should be always above the geocoder--> 
 
    geocoder = new google.maps.Geocoder(); 
 

 
    for (var i = 0; i < cities.length; i++) { 
 
    var city = cities[i]; 
 
    geocodeCity(city, markerCluster); 
 
    } 
 

 
    // Listen for a cluster to be clicked 
 
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
 
    var markers = cluster.getMarkers(); 
 

 
    var content = ''; 
 
    for (var i = 0; i < markers.length; i++) { 
 
     var marker = markers[i]; 
 
     content += marker.title; 
 
     content += ("<br>"); 
 
    } 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    infowindow.setPosition(cluster.getCenter()); 
 
    infowindow.close(); 
 
    infowindow.setContent(content); 
 
    infowindow.open(map); 
 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
     infowindow.close(); 
 
    }); 
 
    }); 
 

 
} 
 

 
function geocodeCity(city, markerCluster) { 
 
    geocoder.geocode({ 
 
    'address': city.city + " Niederösterreich" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     position = results[0].geometry.location; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: position, 
 
     title: "Ort: " + city.city + "\nBeitrag: " + city.title + "\nRed.: " + city.reporter + "\nDatum: " + city.storydate 
 
     }); 
 
     // below code alway lies inside the loop 
 
     markers.push(marker); 
 
     markerCluster.addMarker(marker); 
 
    } else { 
 
     document.getElementById('info').innerHTML += city.city + " status=" + status + "<br>"; 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", function() { 
 
    initialize(cities); 
 
}); 
 

 

 
var cities = [{ 
 
    city: "Sankt Polten", 
 
    title: "title 0", 
 
    reporter: "reporter 0", 
 
    storydate: "November 25,2015 00:00:00" 
 
}, { 
 
    city: "Wiener Neustadt", 
 
    title: "title 1", 
 
    reporter: "reporter 1", 
 
    storydate: "November 25, 2015 01:01:01" 
 
}, { 
 
    city: "Baden", 
 
    title: "title 2", 
 
    reporter: "reporter 2", 
 
    storydate: "November 25,2015 02:02:02" 
 
}, { 
 
    city: "Klosterneuburg", 
 
    title: "title 3", 
 
    reporter: "reporter 3", 
 
    storydate: "November 25, 2015 03:03:03" 
 
}, { 
 
    city: "Krems", 
 
    title: "title 4", 
 
    reporter: "reporter 4", 
 
    storydate: "November 25,2015 04:04:04" 
 
}, { 
 
    city: "Amstetten", 
 
    title: "title 5", 
 
    reporter: "reporter 5", 
 
    storydate: "November 25, 2015 05:05:05" 
 
}, { 
 
    city: "Modling", 
 
    title: "title 6", 
 
    reporter: "reporter 6", 
 
    storydate: "November 25,2015 06:06:06" 
 
}, { 
 
    city: "Traiskirchen", 
 
    title: "title 7", 
 
    reporter: "reporter 7", 
 
    storydate: "November 25, 2015 07:07:07" 
 
}, { 
 
    city: "Schwechat", 
 
    title: "title 8", 
 
    reporter: "reporter 8", 
 
    storydate: "November 25,2015 08:08:08" 
 
}, { 
 
    city: "Ternitz", 
 
    title: "title 9", 
 
    reporter: "reporter 9", 
 
    storydate: "November 25, 2015 09:09:09" 
 
}, { 
 
    city: "Stockerau", 
 
    title: "title 10", 
 
    reporter: "reporter 10", 
 
    storydate: "November 25,2015 10:10:10" 
 
}];

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="info"></div> 
 
<div id="map"></div>