Как сделать так, чтобы пользовательский объект наложения Google Maps вел себя как InfoWindow?

Question

Моя единственная проблема с InfoWindow - у меня нет способа настроить его внешний вид (т. Е. Пузырь, а не его содержимое). Кажется, что единственный способ сделать это - создать собственное наложение и стилизовать его. Но это вызывает у меня проблемы, такие как невозможность выделить текст (перетаскивание мыши над этим наложением просто перемещает карту) или прокрутить (если у наложения есть div с переполненным текстом, прокрутка приводит к увеличению или уменьшению карты, нажимая на полоса прокрутки будет прокручиваться, но одновременно будет перемещаться по карте).

В настоящее время я ловлю события mouseover и mouseout, чтобы отключить / включить перетаскивание и масштабирование, но я все еще не могу выделить текст, и теперь прокручиваю колесико мыши в области наложения, которая не имеет чего прокручивать, вызывает страницу элементы вне карты для перемещения вверх по окну.

Кто-нибудь еще сталкивался с такой ситуацией? Я не видел ничего другого, что действительно покрывало бы это, и я стараюсь не рвать на себе волосы, пытаясь найти решение.

Answer 1

Отличная новость. Похоже, что проблема, с которой я столкнулся в Firefox, была связана с тем, что мой оверлей был больше по высоте, чем контейнер карты, и предполагал, что Google Maps где-то устанавливал

overflow: hidden

(наверное, нет). Установка это сама исправила. Следующий шаг - чтобы ваш оверлейный контейнер перехватывал события кликов и следил за тем, чтобы они не распространялись, как показано в коде ExtInfoWindow: http://gmaps -utility-library.googlecode.com / svn / trunk / extinfowindow / 1.0 / src / extinfowindow.js (ближе к концу инициализации).

Answer 2

Ответ содержится в ссылке niiko на код ExtInfoWindow. Я вытащил его и вставил в пользовательское наложение скелета:

var custom_overlay = {
  init : function(){
    window.CustomOverlay = function(position, map, opt_options){
      this.position_ = position;
      this.map_ = map;
      var options = opt_options || {};
      if (options['pixelOffset'] != undefined) {
        this.pixelOffset_ = options['pixelOffset'];
      }

      this.div_ = document.createElement("div");
      this.setMap(map);
    }

    CustomOverlay.prototype = new google.maps.OverlayView();

    CustomOverlay.prototype.onAdd = function() {
      if(!this.div_){
        this.div_ = document.createElement("div");
      }

      this.div_.style.cssText = "display:none; position:absolute;"

      var panes = this.getPanes();
      panes.floatPane.appendChild(this.div_);
      $(this.div_).appear();

      // catch mouse events and stop them propogating to the map
      google.maps.event.addDomListener(this.div_, 'mousedown', this.stopPropagation_);
      google.maps.event.addDomListener(this.div_, 'dblclick', this.stopPropagation_);
      google.maps.event.addDomListener(this.div_, 'DOMMouseScroll', this.stopPropagation_);

      google.maps.event.trigger(this, 'ready');
    }

    CustomOverlay.prototype.draw = function() {
      var overlayProjection = this.getProjection();
      var coords = overlayProjection.fromLatLngToDivPixel(this.position_);

      if (this.pixelOffset_) {
        coords.x += this.pixelOffset_.width;
        coords.y += this.pixelOffset_.height;
      };
      this.div_.style.left = (coords.x + 16) + "px";
      this.div_.style.top = (coords.y - 6) + "px";
    }

    CustomOverlay.prototype.stopPropagation_ = function(e) {
      if(navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      } else {
        // e.preventDefault(); // optionally prevent default actions
        e.stopPropagation();
      }
    }
  }
}

Answer 3

Мне нужно было иметь оверлеи с прокруткой, но по какой-то причине решение Дэниела с остановкой распространения событий не сработало для меня. Через некоторое время я нашел другое решение.

Предполагается, что вы используете Google Maps V3 и jQuery.

Сначала отключите прокрутку на карте:

var mapOptions = {
  // Other options here
  scrollwheel: false
};
map = new Map(document.getElementById('map-canvas'), mapOptions);

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

$mapDiv.mousewheel(function(e, delta, deltaX, deltaY){
  // If the event target is our overlay or its child, we won't zoom.
  if (!$(e.target).closest('.overlayWithScrolling').length) {
    map.setZoom(map.getZoom() + deltaY);
  }
});

Answer 4

Может быть, вы можете решить проблему с невозможностью настроить пузырь, создавая контент, который использует относительное позиционирование CSS, чтобы скрыть / перезаписать пузырь?

Кроме того (снимок в темноте), я не уверен, но не могли бы вы настроить маркер и преобразовать его в своего рода InfoWindow?