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

问题描述 投票:0回答:1

我正在使用JavaScript学习Google地图。我遵循的是教程代码,到目前为止,我的地图上带有一些标记,这些标记聚集在缩小上。这是代码-

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

我想在单击集群时获得集群的大小,到目前为止,我正在使用getGridSize进行获取,但是它返回以像素为单位的值。无论如何,我可以用米或公里来获得此值吗?

javascript html google-maps markerclusterer
1个回答
0
投票

您可能应该使用MarkerClustererPlus,它比您使用的https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus更新。>

您可以使用Marker Clusterer创建的叠加层,并使用其投影转换2个点,这些点之间用n

像素分隔,其中n是您的网格大小。您可以使用fromContainerPixelToLatLng方法。

然后您可以使用fromContainerPixelToLatLng方法,通过使用Geometry库(您需要在API调用中包括它)来计算2个LatLng点之间的距离。

概念证明:computeDistanceBetween

computeDistanceBetween
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);
© www.soinside.com 2019 - 2024. All rights reserved.