无法找到中心来放大谷歌地图markerclusterer

Question

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

我也把它当作小提琴，但即使我准确地复制了我的代码，小提琴也不起作用： https://jsfiddle.net/LNMSchneiderman/zk9y1g0j/3/

当您单击标记簇，它会放大得如此之大，以至于您看不到任何街道名称或任何地标。我希望它不要放大得那么紧。我已经让它调整缩放，但现在我无法让它以集群为中心。有人可以帮忙吗？

相关代码是：

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

我的建议是确定您想要的最大缩放，然后编写一个自定义 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);
});

单击群集后生成的缩放：

概念证明小提琴

代码片段：

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>

Answer 2

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

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); 
});