Как прослушивать увеличенное изображение Google Maps?

Я хочу знать, когда событие zoom_changed Google Maps запускается специально при взаимодействии с кнопками +/-. Если я использую обычный прослушиватель событий для zoom_changed, я не могу определить, является ли это событием, созданным пользователем, или изменением масштаба, вызванным чем-то вроде fitBounds(). Ищите лучший способ сделать это.

Я пробовал следующие вещи: ни один из них не работает:

1) Посмотрел информацию о событии на zoom_changed. Кажется, что нет.

2) Добавьте слушателей для мыши и мыши, которые позволяют мне установить флаг, чтобы увидеть, находится ли пользователь в границах карты и проверить флаг на zoom_changed. Это не работает, потому что карта не рассматривает кнопки масштабирования как часть рамки карты (другими словами, зависание кнопок масштабирования запускает событие mouseout).

3) Добавьте обычный (не-gMap) прослушиватель к кнопкам масштабирования. Тем не менее, я не могу найти окончательный селектор CSS, который позволит мне захватить только кнопки.

4) Посмотрел на функцию в API gMaps, которая позволяла мне делать что-то вроде getZoomElements(), а затем я мог бы установить прослушиватели, используя это.

Странно, что я могу четко делать то, что хочу, добавив на карту пользовательский элемент управления. Кажется очень странным, что они заставили бы меня это сделать, вместо того, чтобы зацепить настройки масштабирования по умолчанию.

Ответ 1

Я бы просто не зацепил кнопки +/- (или кнопки на вашем собственном настраиваемом элементе управления). Пользователь может изменить масштаб на карте с помощью колеса мыши или дважды щелкнуть по карте. Кроме того, вы будете полагаться на детали реализации, а не на документальный API, который является основным no-no.

Это действительно означает, что единственным надежным документированным способом обнаружения изменения масштаба является прослушивание zoom_changed события Map.

Если обработчик событий не может определить, произошло ли событие от действия пользователя или вызова API, существует два подхода:

Установите флаг перед вызовом функции API, чтобы вы знали, что можете игнорировать это изменение.
Можете ли вы перепроектировать свое приложение таким образом, чтобы неважно, изменилось ли изменение масштаба от кода или пользователя?

Ответ 2

Я решил эту проблему, создав пользовательские кнопки масштабирования для моей карты.

Вот код из моего проекта:
Изменить. Удалено ненужный и понятный общий код.

функция zoomControl:

function zoomControl(map, div) {

  var controlDiv = div,
      control = this;

  // Set styles to your own pa DIV
  controlDiv.style.padding = '5px';

  // Set CSS for the zoom in div.
  var zoomIncrease = document.createElement('div');
  zoomIncrease.title = 'Click to zoom in';
  // etc.

  // Set CSS for the zoom in interior.
  var zoomIncreaseText = document.createElement('div');
  // Use custom image
  zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>';
  zoomIncrease.appendChild(zoomIncreaseText);

  // Set CSS for the zoom out div, in asimilar way
  var zoomDecreaseText = document.createElement('div');
  // .. Code .. Similar to above

  // Set CSS for the zoom out interior.
  // .. Code ..

  // Setup the click event listener for Zoom Increase:
  google.maps.event.addDomListener(zoomIncrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom+1);
      // Other Code parts
  });

  // Setup the click event listener for Zoom decrease:
  google.maps.event.addDomListener(zoomDecrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom-1);
  });
}

ваша функция инициализации:

function initializeMap() {

    var latlng = new google.maps.LatLng(38.6, -98);
    var options = {
        zoom : 5,
        center : latlng,
        mapTypeId : google.maps.MapTypeId.ROADMAP,  
        // Other Options
    };
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"),
            options);

    // The main part - Create your own Custom Zoom Buttons
    // Create the DIV to hold the control and call the zoomControl()
    var zoomControlDiv = document.createElement('div'), 
        zoomLevelControl = new zoomControl(MainMap, zoomControlDiv);

    zoomControlDiv.index = 1;
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv);
}

Надеюсь, что это поможет

Ответ 3

var zoomFlag = "user"; // always assume it user unless otherwise

// some method changing the zoom through API
zoomFlag = "api";
map.setZoom(map.getZoom() - 1);
zoomFlag = "user";

// google maps event handler
zoom_changed: function() {
  if (zoomFlag === "user") {
    // user zoom
  }
}

Ответ 4

Я хотел сделать то же самое. Я надеялся найти, что в API Карт Google был встроен способ, но, как минимум, вы должны иметь возможность сохранить начальный уровень масштабирования в качестве переменной при инициализации карты. Затем сравните результат getZoom() с ним, чтобы узнать, было ли это увеличение или уменьшение.

Например:

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 });
var previous_zoom = 11;

google.maps.event.addListener(map,'zoom_changed',function(){
  if(map.getZoom() > previous_zoom) {
    alert('You just zoomed in.');
  }
  previous_zoom = map.getZoom();
}

Ответ 5

Я бы предложил использовать настраиваемый элемент управления для увеличения/уменьшения масштаба, а затем использовать прослушиватели событий в пользовательском конгруге:

http://goo.gl/u8gKC

Вы можете с легкостью скрыть управление масштабированием по умолчанию:

http://goo.gl/N5HIE

(zoomControl, чтобы быть конкретным)