我正在学习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()); }); } 我想在单击群集时获取群集大小，到目前为止，我正在使用getGridSize来获取，但它以像素为单位返回值。无论如何，我可以以米或公里为单位获得此值吗？
1 回答
函数式编程
TA贡献1807条经验 获得超9个赞
您可能应该使用MarkerClustererPlus，它比您使用的 https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus
您可以使用标记聚类分析器创建的叠加，并使用其投影来转换由 n 个像素分隔的 2 个点，其中 n 是栅格大小。您可以使用 fromContainerPixelToLatLng 方法。
然后，您可以使用 computeDistanceBetween 方法，使用 Geometry 库（需要将其包含在 API 调用中）来计算 2 个点之间的距离。LatLng
概念验证：这里
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>
但警告，由于根据缩放级别、纬度以及执行计算的地图投影部分，由于墨卡托投影，您可能会得到非常不同的结果。
添加回答
举报
0/150
提交
取消