谷歌地图 setZoom 无法正常工作

Question

我有一个奇怪的问题。我正在获取页面上的数据，然后用我的新数据更新我的地图。

当页面首次加载时，我使用 initializeMap() 初始化地图。然后我加载数据initializeMapData()。随后，如果我在初始页面加载（使用 ajax）之后加载数据，我不会重新初始化地图，我只需调用 initializeMapData()。

问题是有时地图中的缩放不反映我提供的值，虽然我通过 getZoom() 打印出缩放级别，它显示了正确的值，但在地图上不正确。看起来它没有更新它（所以它是以前的地图缩放级别），即使 getZoom 显示了正确的值。

FYI -- 如果我每次通过 ajax 获取数据并更新该数据时都初始化地图 intitializeMap() ，但随后我看到重新初始化的地图闪烁，我不想要。我只是想避免这种情况，并且觉得它应该可以工作！

这里有两种主要方法。第一个和第二个方法总是在页面加载时被调用，只有第二个方法在 ajax 调用时被调用以更新地图中的数据。

更新！ - 我找到了导致问题的区域。它正在清除缩放更改事件的侦听器！但是，如果我删除清除它，那么每次更新数据时都会创建并多次调用该事件。不好！这是一个错误吗？

google.maps.event.clearListeners(scope.map, 'zoom_changed');

google.maps.event.addListener(scope.map, 'zoom_changed', function() {
  //if (scope.zoomFlag === "user") {
  //    var zoomLevel = scope.map.getZoom();
  //    scope.mapType = getMapType(zoomLevel);
  //    scope.getEvents();
  //}

});

scope.initializeMap();
scope.initializeMapData();

这是第一种方法

scope.initializeMap = function() {
  scope.map = new google.maps.Map(document.getElementById('eventMap'), {
    scrollwheel: false,
    mapTypeControl: false,
    streetViewControl: false,
    disableDoubleClickZoom: true //,
      //zoom: scope.getZoom()
  });
};

这是第二种方法

scope.initializeMapData = function() {
  // clear all markers
  for (var i = 0; i < scope.markers.length; i++) {
    scope.markers[i].setMap(null);
  }

  var latLng = {
    lng: scope.longitude,
    lat: scope.latitude
  };

  // set center
  scope.map.setCenter(latLng);

  // set zoom
  //scope.zoomFlag = "api";
  console.log("before:" + scope.map.getZoom());
  var zoomLevel = scope.getZoom();
  console.log("level:" + zoomLevel);
  scope.map.setZoom(zoomLevel);
  console.log("after:" + scope.map.getZoom());
  //scope.zoomFlag = "user";

  // create center marker (for testing)
  var centerMarker = new google.maps.Marker({
    position: latLng,
    map: scope.map,
    draggable: false,
    icon: '/Images/searchQuery_pin_distance.png'
  });
  scope.markers.push(centerMarker);

  // clear center circle
  scope.mapCircle !== undefined ? scope.mapCircle.setMap(null) : null;

  var centerCircle = new google.maps.Circle({
    strokeColor: 'transparent',
    //strokeOpacity: 1,
    //strokeWeight: 2,
    fillColor: 'lightgrey', //'#FF0000',
    fillOpacity: 0.50,
    map: scope.map,
    center: latLng,
    radius: getRadius()
  });
  scope.mapCircle = centerCircle;

  // clear click event listeners first
  google.maps.event.clearListeners(scope.map, 'click');

  for (var i = 0; i < scope.mapData.length; i++) {
    var event = scope.mapData[i];
    var contentString = event.Title;
    var infowindow = new google.maps.InfoWindow({
      //content: contentString,
      maxWidth: 200
    });
    var marker = new google.maps.Marker({
      position: {
        lat: event.Latitude,
        lng: event.Longitude
      },
      map: scope.map //,
        //title: event.Title
    });
    scope.markers.push(marker);
    //marker.addListener('click', function () {
    //    infowindow.open(scope.map, marker);
    //});
    google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
      return function() {
        infowindow.setContent(contentString);
        infowindow.open(scope.map, marker);
      }
    })(marker, contentString));
  }

  // clear drag end event listener
  google.maps.event.clearListeners(scope.map, 'dragend');

  google.maps.event.addListener(scope.map, 'dragend', function() {
    var LatLng = scope.map.getCenter();

    var url = window.location.href.replace("latitude=" + scope.latitude, "latitude=" + LatLng.lat()).replace("longitude=" + scope.longitude, "longitude=" + LatLng.lng()).replace(/\bPage=\d+/, "Page=1");

    scope.latitude = LatLng.lat();
    scope.longitude = LatLng.lng();
    scope.getEvents();

    scope.changeUrl('index', url);
  });

  // clear zoom event listener
  google.maps.event.clearListeners(scope.map, 'zoom_changed');

  google.maps.event.addListener(scope.map, 'zoom_changed', function() {
    //if (scope.zoomFlag === "user") {
    //    var zoomLevel = scope.map.getZoom();
    //    scope.mapType = getMapType(zoomLevel);
    //    scope.getEvents();
    //}

  });

  function getMapType(zoomLevel) {
    var mapType;
    switch (zoomLevel) {
      case 16:
        mapType = 'street_address';
        break;
      case 15:
        mapType = 'route';
        break;
      case 13:
        mapType = 'locality';
        break;
      case 8:
        mapType = 'administrative_area_level_2';
        break;
      case 6:
        mapType = 'administrative_area_level_1';
        break;
      case 3:
        mapType = 'country';
        break;
      case 3:
        mapType = 'continent';
        break;
      case 12:
      case 11:
      default:
        mapType = 'locality';
    }
    return mapType;
  };

  function getRadius() {
    var radius;
    switch (scope.mapType) {
      case 'street_address':
        radius = 500;
        break;
      case 'route':
        radius = 1200;
        break;
      case 'locality':
        radius = 4047;
        break;
      case 'administrative_area_level_2':
        radius = 8;
        break;
      case 'administrative_area_level_1':
        radius = 6;
        break;
      case 'country':
        radius = 4000000;
        break;
      case 'continent':
        radius = 4000000;
        break;
      default:
        radius = 4047;
    }
    return radius;
  };
};

这是获取缩放级别的另一种方法

scope.getZoom = function() {
  var zoom;
  switch (scope.mapType) {
    case 'street_address':
      zoom = 16;
      break;
    case 'route':
      zoom = 15;
      break;
    case 'postal_code':
      zoom = 13;
      break;
    case 'locality':
      zoom = 13;
      break;
    case 'administrative_area_level_2':
      zoom = 8;
      break;
    case 'administrative_area_level_1':
      zoom = 6;
      break;
    case 'country':
      zoom = 3;
      break;
    case 'continent':
      zoom = 3;
      break;
    default:
      zoom = 13;
  }
  return zoom;
};

Answer 1

我不确定为什么会这样，但确实如此。

if (scope.listener !== undefined)
  scope.listener.remove();

scope.listener = google.maps.event.addListener(scope.map, 'zoom_changed', function() {
  // do stuff
});

但这会破坏地图中的缩放设置

google.maps.event.clearListeners(scope.map, 'zoom_changed');