Question

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

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

问题是有时地图中的缩放并不反映我提供的值，虽然我通过getZoom（）打印出缩放级别，并显示正确的值，它是＆＃39;在地图上不正确。看起来它没有更新它（因此它是之前的地图缩放级别），即使getZoom显示正确的值。

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

以下是两种主要方法。第一个和第二个方法将始终在页面加载时调用，并且只有第二个方法在ajax调用上被调用以更新映射中的数据。

已更新！ - 我找到了造成这个问题的区域。它为变焦事件清除了听众！但是如果我删除它，那么每次更新数据时都会创建并多次调用事件。不好！这是一个错误吗？

＆＃13;

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

＆＃13;

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

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

console.log('Time --->>>>' + moment().valueOf() +' / '+ new Date());
var customeTime = moment().format('YYYY-MM-DD HH:mm:ss').toString();
console.log('customeTime time----->'+customeTime);

Answer 1

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

If Range("A1").Value Like "correct!" Then
    MsgBox "hey"
End If

但这会搞砸地图中的缩放设置

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

谷歌地图setZoom无法正常工作

1 个答案: