我正在用javascript学习谷歌地图。我正在遵循教程代码，到目前为止，我有带有一些标记的地图，这些标记在缩小时会聚集在一起。这是代码 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
#map {
height: 500px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var markers = locations.map(function(location) {
return new google.maps.Marker({
position: location
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
console.log(markerCluster.getGridSize());
});
}
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
]
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&callback=initMap">
</script>
</body>
</html>
我想在单击集群时获取集群大小，截至目前我正在使用 getGridSize 来获取，但它返回以像素为单位的值。无论如何，我可以以米或公里为单位获得这个值吗？
您可能应该使用比您使用的更新的 MarkerClustererPlus https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus
您可以使用标记聚类器创建的叠加，并使用其投影转换由 n 个像素分隔的 2 个点，其中n是网格大小。您可以使用fromContainerPixelToLatLng方法。
然后，您可以使用computeDistanceBetween方法使用 Geometry 库计算 2 个LatLng点之间的距离(您需要将其包含在 API 调用中(。
概念验证：这里
var map;
var markers = [];
var markerCluster;
function initialize() {
var center = new google.maps.LatLng(0, 0);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
minZoom: 1,
center: center,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Cluster all the markers
markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://ccplugins.co/markerclusterer/images/m',
gridSize: 100,
minimumClusterSize: 10
});
google.maps.event.addListener(map, 'idle', function() {
getGridSizeInMeters();
});
}
function getGridSizeInMeters() {
var size = markerCluster.getGridSize();
var p1 = markerCluster.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, 0));
var p2 = markerCluster.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, size));
var meters = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
console.log('Grid size is %i meters / %i kilometers', meters, meters / 1000);
}
google.maps.event.addDomListener(window, 'load', initialize);#map {
height: 180px;
}<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>但请注意，根据缩放级别、纬度以及您进行计算的地图投影部分，由于墨卡托投影，您可能会获得非常不同的结果。