我正在學習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>
但警告，由于根據縮放級別、緯度以及執行計算的地圖投影部分，由于墨卡托投影，您可能會得到非常不同的結果。