Markerclusterer 以米为单位获取集群大小

Question

I am learning google maps in javascript.我正在学习 javascript 中的谷歌地图。 I am following the tutorial code and so far I have the map with some markers on it which get clustered on zooming out.我正在关注教程代码，到目前为止，我有 map 上面有一些标记，这些标记在缩小时会聚集在一起。 Here is the code -这是代码 -

<!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>

I would like to get the cluster size when I click on the cluster,which as of now I am using getGridSize to get,but it returns the value in pixels.我想在单击集群时获取集群大小，到目前为止我正在使用 getGridSize 来获取，但它以像素为单位返回值。 Is there anyway I can get this value in meters or kilometers?无论如何我可以得到这个以米或公里为单位的值吗？

Answer 1

You should probably use MarkerClustererPlus which is more recent than what you are using https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus您可能应该使用比您使用的更新的MarkerClustererPlus https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus

You can use the overlay created by the Marker Clusterer and use its projection to convert 2 points separated by n pixels, where n is your grid size.您可以使用 Marker Clusterer 创建的叠加层并使用其投影来转换由n 个像素分隔的 2 个点，其中n是您的网格大小。 You can use the fromContainerPixelToLatLng method for that.您可以为此使用fromContainerPixelToLatLng方法。

Then you can compute the distance between the 2 LatLng points by using the Geometry library (you need to include it with the API call) by using the computeDistanceBetween method.然后，您可以使用几何库（您需要在 API 调用中包含它）使用computeDistanceBetween方法来计算 2 个LatLng点之间的距离。

Proof of concept: here概念证明：这里

 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>

Warning though, as depending on the zoom level, the latitude, and therefore the part of the map projection on which you do the calculation, you might get very different results due to the Mercator projection.但是警告，由于取决于缩放级别、纬度，以及因此您在其上进行计算的 map 投影的部分，由于墨卡托投影，您可能会得到非常不同的结果。

Markerclusterer 以米为单位获取集群大小

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-26 13:18:31

Markerclusterer 以米为单位获取集群大小

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-26 13:18:31

解决方案1
1 已采纳 2020-05-26 13:18:31