3

国レベルでマーカーをクラスター化する方法はありますか? クラスタリングが現在機能している方法に満足していますが、初期ロード時に国レベルで分離し、次にユーザーがズームインするときに通常のクラスター (またはこれまでより簡単なもの) で分離したいと考えています。現在、いくつかの Google サンプル コードでこれをテストしています。

   var markerClusterer = null;
      var map = null;
      var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
          'chco=FFFFFF,008CFF,000000&ext=.png';

      google.maps.event.addDomListener(window, 'load', initialize);

      function refreshMap() {
        if (markerClusterer) {
          markerClusterer.clearMarkers();
        }

        var markers = [];

        var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));

        for (var i = 0; i < 1000; ++i) {
          var latLng = new google.maps.LatLng(data.photos[i].latitude,
              data.photos[i].longitude)
          var marker = new google.maps.Marker({
           position: latLng,
           draggable: true,
           icon: markerImage
          });
          markers.push(marker);
        }

        var zoom = parseInt(document.getElementById('zoom').value, 10);
        var size = parseInt(document.getElementById('size').value, 10);
        var style = parseInt(document.getElementById('style').value, 10);
        zoom = zoom == -1 ? null : zoom;
        size = size == -1 ? null : size;
        style = style == -1 ? null: style;

        markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: zoom,
          gridSize: size,
          styles: styles[style]
        });
      }

      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(39.91, 116.38),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var refresh = document.getElementById('refresh');
        google.maps.event.addDomListener(refresh, 'click', refreshMap);

        var clear = document.getElementById('clear');
        google.maps.event.addDomListener(clear, 'click', clearClusters);

        refreshMap();
      }

      function clearClusters(e) {
        e.preventDefault();
        e.stopPropagation();
        markerClusterer.clearMarkers();
      }

現在のコードは、開発者が定義できるデフォルトのグリッド サイズにクラスター化されます。ただし、グリッド サイズではなく、ポリゴン タイプのクラスタリングを実装したいと考えています。誰かがこれを行う方法を知っているなら、助けてください。

編集済み

提案されたソリューションを機能させるために、少なくとも1時間半試してみました。これが私のコードです

 function initialize() {
        var center = new google.maps.LatLng(46.468133,1.494141);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 7; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          marker.country = dataPhoto.country;
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers, {
            countryZoom: 3,
        });

        this.countryZoom = options['countryZoom'] ;
      }
      google.maps.event.addDomListener(window, 'load', initialize);

データ

var data = {"count": 10785236,
    "photos": [
        {
            "photo_id": 27932, 
            "latitude" : 43.516689,
            "longitude" : -0.703125,
            "country": "France"
        }, {
            "photo_id": 27342, 
            "latitude": 43.802819,
            "longitude": 4.262695,
            "country": "France"
        }, {
            "photo_id": 24932, 
            "latitude": 48.312428,
            "longitude": -3.55957,
            "country": "France"
        }, {
            "photo_id": 23332, 
            "latitude": 50.597186,
            "longitude": 2.219238,
            "country": "France"
        }, {
            "photo_id": 57932, 
            "latitude": 48.777913,
            "longitude": 7.426758,
            "country": "France"
        }, {
            "photo_id": 65432, 
            "latitude": 48.980217,
            "longitude": 8.964844,
            "country": "Germany"
        }, {
            "photo_id": 65432, 
            "latitude": 47.813155,
            "longitude": 7.382813,
            "country": "France"
        }
    ]
}

プラグインの編集

  // Get our current map view bounds.
  // Create a new bounds object so we don't affect the map.
  var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
      this.map_.getBounds().getNorthEast());
  var bounds = this.getExtendedBounds(mapBounds);

  for (var i = 0, marker; marker = this.markers_[i]; i++) {
       var added = false;
    if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
    //  this.addToClosestCluster_(marker);
    for (var j = 0, cluster; cluster = this.clusters_[j]; j++) {

                // *** Check if the current zoom level is for clustering
                // based on countries
                if (this.countryZoom && this.countryZoom == this.map_.getZoom()) {
                    if (!added && cluster.country == marker.country) {
                        added = true;
                        cluster.addMarker(marker);
                        break;
                    }
                } else {
                    if (!added && cluster.getCenter() && cluster.isMarkerInClusterBounds(marker)) {
                        added = true;
                        cluster.addMarker(marker);
                        break;
                    }
                }


            }

            if (!added) {
                // Create a new cluster.
                var cluster = new Cluster(this);

                // *** Check if the current zoom level is for clustering
                // based on countries
                if (this.countryZoom && this.countryZoom == this.map_.getZoom()) {
                    cluster.country = marker.country;
                }

                cluster.addMarker(marker);
                this.clusters_.push(cluster);
            }
        }
    }
};

それでも国にバッチ処理しません

4

0 に答える 0