标记群集获取簇大小（以米为单位）
我正在学习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来获取，但它以像素为单位返回值。无论如何，我可以以米或公里为单位获得此值吗？
30秒到达战场1回答
-
函数式编程
您可能应该使用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>但警告，由于根据缩放级别、纬度以及执行计算的地图投影部分，由于墨卡托投影，您可能会得到非常不同的结果。
随时随地看视频慕课网APP
相关分类
JavaScript