Google Map API如何通过单击几个标记之一来缩小然后放大

Question

在地图上我有各种标记。单击标记后，用户将放大并以该标记为中心查看详细信息，而maptypeid也会从地形变为卫星。

我希望用户能够再次单击标记以缩小，将地图中心并更改为地形。

地图初始化在这里：

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    zoom: 11,
    center: new google.maps.LatLng(-37.6756817,145.6690691),
    mapTypeId: 'terrain'
});
var mapzoom = map.getZoom(); 

我们设置了这样的城镇：

var locations = [
    // Healesville
    ['Town: <a href="#">Healesville</a>', -37.6534206,145.5117927, 'uploaded-images/marker-red-32h.png',0],
    // Warburton
    ['Town: <a href="#">Warburton</a>', -37.7514003,145.6919378, 'uploaded-images/marker-red-32h.png',1],
    [...],
    [...],
    [...]
];

缩放第一个操作的代码在这里：

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        map.panTo(this.getPosition());
        map.setZoom(16);
        map.setMapTypeId('satellite'); 
    }
})(marker, i));

我开始第二部分缩放：

google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        if(zoomLevel > 11) {
            return function() {
                var center = new google.maps.LatLng(-37.6756817,145.6690691);
                map.setCenter(center);
                map.setZoom(11);
                map.setMapTypeId('terrain');
            }
        } else {
            return function() {
                map.panTo(this.getPosition());
                map.setZoom(16);
                map.setMapTypeId('satellite');
            }
        }
    })(marker, i));
}

不幸的是，缩放脚本仅在标记阵列中的最后一个标记上起作用。需要计算如何缩小地图上每个标记的原始设置。

Answer 1

您在缩放处理代码中只有一个对最后一个标记的引用（将其设置为最后一个通过循环的最后一个值）。更简单地将代码添加到标记单击功能。我认为您想要的是：

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    zoomLevel = map.getZoom();
    if (zoomLevel <= 11) {
      map.panTo(this.getPosition());
      map.setZoom(16);
      map.setMapTypeId('satellite');
    } else {
      var center = new google.maps.LatLng(-37.6756817, 145.6690691);
      map.setCenter(center);
      map.setZoom(11);
      map.setMapTypeId('terrain');      
    }
  }})(marker, i));
}

您可能需要通过计算显示标记的界限并与该边界进行拟合拟合边界来动态计算中心/缩放（而不是当前中的代码。

概念证明小提琴

代码段：

var zoomLevel;
function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    zoom: 11,
    center: new google.maps.LatLng(-37.6756817, 145.6690691),
    mapTypeId: 'terrain'
  });
  var mapzoom = map.getZoom();
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: locations[i][1],
        lng: locations[i][2]
      },
      map: map
    })
    var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        zoomLevel = map.getZoom();
        if (zoomLevel <= 11) {
          map.panTo(this.getPosition());
          map.setZoom(16);
          map.setMapTypeId('satellite');
          clickedMarker = marker;
        } else {
          var center = new google.maps.LatLng(-37.6756817, 145.6690691);
          map.setCenter(center);
          map.setZoom(11);
          map.setMapTypeId('terrain');
        }
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  // Healesville
  ['Town: <a href="#">Healesville</a>', -37.6534206, 145.5117927, 'uploaded-images/marker-red-32h.png', 0],
  // Warburton
  ['Town: <a href="#">Warburton</a>', -37.7514003, 145.6919378, 'uploaded-images/marker-red-32h.png', 1],
];

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>