无法为 google 地图找到要放大的中心 markerclusterer

Question

这可能有一个非常简单的解决方案，但我遇到了麻烦。我有一个简单的 markerclusterer。它聚集了两点： https://newsinteractive.post-gazette.com/dev/test.php

我也把它作为 fiddle，但即使我完全复制了我的代码，fiddle 也不起作用： https://jsfiddle.net/LNMSchneiderman/zk9y1g0j/3/

当您单击 markerclusterer 时的默认行为是将其放大到您看不到任何街道名称或任何地标。我希望它不要放大得那么紧。我已经得到它来调整缩放比例，但现在我无法让它以集群为中心。有人可以帮忙吗？

相关代码为：

var markerClusterer  = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', gridSize: 50, maxZoom: 15
                    }); //setting maxZoom doesn't fix this problem
                    
google.maps.event.addListener(markerClusterer , 'clusterclick', function(cluster){
    if (markerClusterer.isZoomOnClick()) {
        //map.setCenter(cluster.latlng);//"cannot read properties of undefined"
        map.panTo(markerClusterer.getCenter()); //error: not a function
        this.map.setZoom(markerClusterer.getMaxZoom()+1); //works, but doesn't center on the cluster
    }

                        
});

Answer 1

嗯，这有点不准确，但我所做的是：

var markerClusterer  = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', gridSize: 50, maxZoom: 14 });
                    
google.maps.event.addListener(markerClusterer , 'clusterclick', function(cluster){
    //get all the markers in this cluster
    /var m = cluster.getMarkers(); 
    //get the position of one of them -- I picked the first one
    var newCenter = m[0].position; 
    //set the center to that one marker in the cluster
    map.setCenter(newCenter); 
    //zoom into that marker with the less tight zoom value      
    this.map.setZoom(markerClusterer.getMaxZoom()+1); 
});

Answer 2

我的建议是确定你想要的最大缩放，然后编写一个自定义 clusterclick 监听器，它缩放到集群边界，然后如果缩放大于你想要的最小值（比如 18），将地图缩放更改为该最小值：

var markerClusterer = new MarkerClusterer(map, markers, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  gridSize: 50,
  maxZoom: 15,
  zoomOnClick: false // turn off the default clusterclick behavior
});
google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
  var bounds = cluster.getBounds();
  google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
    if (map.getZoom() > 18)
      map.setZoom(18);
  });
  map.fitBounds(bounds);
});

点击集群后的结果缩放：

proof of concept fiddle

代码片段：

var markers = [];
$(document).ready(function() {
  console.log("$(document).ready")

  var myOptions = {
    center: new google.maps.LatLng(40.69484947367398, -80.30684540632623), //40.445235,-80.00594
    zoom: 12
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log(map.getZoom());
  })
  var myPoints = [
    [40.67241473672653, -80.30913200196709],
    [40.67244572478815, -80.30880637497815]
  ];

  for (var i = 0; i < myPoints.length; i++) {
    var lat = parseFloat(myPoints[i][0]);
    var lng = parseFloat(myPoints[i][1]);
    var point = new google.maps.LatLng(lat, lng);

    var marker = createMarker(point, map);
  } //end for

  var markerClusterer = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    gridSize: 50,
    maxZoom: 15,
    zoomOnClick: false // turn off the default clusterclick behavior
  });

  google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
    var bounds = cluster.getBounds();
    google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
      if (map.getZoom() > 18)
        map.setZoom(18);
    });
    map.fitBounds(bounds);
  });
}); 

function createMarker(point, map) {
  // Create the HTML text based on the values passed in from XML

  var icon = {
    path: "M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z", //SVG path of awesomefont marker
    fillColor: '#BF3604', //color of the marker
    fillOpacity: 1,
    strokeWeight: 0.4,
    strokeColor: '#000000',
    scale: 0.07, //size of the marker, careful! this scale also affects anchor and labelOrigin
    anchor: new google.maps.Point(200, 510), //position of the icon, careful! this is affected by scale
    labelOrigin: new google.maps.Point(205, 190) //position of the label, careful! this is affected by scale
  }

  var marker = new google.maps.Marker({
    // id: marker_id,
    position: point,
    map: map,
    icon: icon
  });
  markers.push(marker); //add this marker to an array of all markers
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#map_canvas {
  width: 100%;
  max-width: none;
  height: 100%;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>MarkerClusterer example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>

<body>
  <div id="map_canvas"></div>
</body>

</html>

无法为 google 地图找到要放大的中心 markerclusterer

can't find center to zoom into for google maps markerclusterer

google-maps

zooming

markerclusterer