web-dev-qa-db-ja.com

クリックズーム時のmarkerClusterer

MarkerClustererをGoogleマップに追加しました。それは完全にうまく働きます。

クラスターがクリックされたときのズームイン動作を調整する方法があるかどうか疑問に思っています。できればズームレベルを変えたいのですが。

これを達成する方法はありますか？

ありがとう

javascriptgoogle-mapszoomgoogle-maps-markersmarkerclusterer
26
AlexBrand

Clusterclickイベントを提案どおりに変更しました。

/**
* Triggers the clusterclick event and zoom's if the option is set.
*/
ClusterIcon.prototype.triggerClusterClick = function() {
var markerClusterer = this.cluster_.getMarkerClusterer();

// Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

if (markerClusterer.isZoomOnClick()) {
// Zoom into the cluster.
// this.map_.fitBounds(this.cluster_.getBounds());

// modified zoom in function
this.map_.setZoom(markerClusterer.getMaxZoom()+1);

 }
};

それはうまくいきます！どうもありがとう

8
AlexBrand

MarkerClustererソースコードが更新され、クリックイベントへのアクセスがはるかに簡単になりました。

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    // your code here
});

ここで、「markerCluster」はMarkerClusterオブジェクトではありません。関数内でもアクセスできます

cluster.getCenter();
cluster.getMarkers();
cluster.getSize();

低いズームレベルでの概要をわかりやすくするためにカスタムタイルセットを使用しているため、これを使用して別のマップタイプに切り替えます。

map.setCenter(cluster.getCenter()); // zoom to the cluster center
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); // switch map type
map.setOptions(myMapOptions); // apply some other map options (optional)

よろしくジャック

54
Jack

Clusterclick markerClustererイベントのリスナーを使用して、ソースコードを変更せずにこれを行うことができます。

var mcOptions = {gridSize: 40, maxZoom: 16, zoomOnClick: false, minimumClusterSize: 2};
markerClusterer = new MarkerClusterer(map, markers, mcOptions);

google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster){
    map.setCenter(markerClusterer.getCenter());
    map.setZoom(map.getZoom()+1);
});

すなわち。 zoomOnClick = falseを設定して、地図のズーム動作をより細かく制御し、クリックごとにズーム量とズーム位置をトリガーします。

8
Natacha Beaugeais

APIはズーム機能を切り替えることしかできないようです

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

したがって、ソースを編集する必要があります。ソースは1055行目にあるようです

/**
 * Triggers the clusterclick event and zoom's if the option is set.
 */
ClusterIcon.prototype.triggerClusterClick = function() {
  var markerClusterer = this.cluster_.getMarkerClusterer();

  // Trigger the clusterclick event.
  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

  if (markerClusterer.isZoomOnClick()) {
    // Zoom into the cluster.
    this.map_.fitBounds(this.cluster_.getBounds());
  }
};
3
Galen

誰かがこの関数をcoffeescriptで記述する必要がある場合は、上位の回答とマークされた回答を1つのコードスニペットにマージしました。

mcOptions =
  maxZoom: 16

markerCluster = new MarkerClusterer map, markers, mcOptions
# listener if a cluster is clicked
google.maps.event.addListener markerCluster, "clusterclick", (cluster) ->
  if markerCluster.isZoomOnClick() # default is true
    #get bounds of cluster
    map.fitBounds cluster.getBounds()
    #zoom in to max zoom plus one. 
    map.setZoom markerCluster.getMaxZoom() + 1

このコードチェックは、クリックでズームが設定されています。最大ズームに1を加えた拡大で、クラスターの中心にある場合。非常にシンプルなコード。

0
Whitecat