我正在學(xué)習(xí)javascript中的谷歌地圖。我正在遵循教程代碼，到目前為止，我有一個(gè)地圖上有一些標(biāo)記，這些標(biāo)記在縮小時(shí)會(huì)聚類(lèi)。這是代碼 -<!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()); }); } 我想在單擊群集時(shí)獲取群集大小，到目前為止，我正在使用getGridSize來(lái)獲取，但它以像素為單位返回值。無(wú)論如何，我可以以米或公里為單位獲得此值嗎？
1 回答
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可能應(yīng)該使用MarkerClustererPlus，它比您使用的 https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus
您可以使用標(biāo)記聚類(lèi)分析器創(chuàng)建的疊加，并使用其投影來(lái)轉(zhuǎn)換由 n 個(gè)像素分隔的 2 個(gè)點(diǎn)，其中 n 是柵格大小。您可以使用 fromContainerPixelToLatLng 方法。
然后，您可以使用 computeDistanceBetween 方法，使用 Geometry 庫(kù)（需要將其包含在 API 調(diào)用中）來(lái)計(jì)算 2 個(gè)點(diǎn)之間的距離。LatLng
概念驗(yàn)證：這里
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>
但警告，由于根據(jù)縮放級(jí)別、緯度以及執(zhí)行計(jì)算的地圖投影部分，由于墨卡托投影，您可能會(huì)得到非常不同的結(jié)果。