Показать сообщение отдельно
  #1 (permalink)  
Старый 12.12.2009, 20:45
Интересующийся
Отправить личное сообщение для sshz Посмотреть профиль Найти все сообщения от sshz
 
Регистрация: 12.01.2009
Сообщений: 12

drag&drop google maps работает во всем кроме chrome
Есть карта google maps, для правильного отображения tooltip'ов маркеров на карте, им прибавляются значения на которые карта была сдвинута, что бы tooltip'ы "двигались" вместе с картой а не оставались на месте. Вроде бы приличный код и везде работает, но не работает в Chrome, во всех версиях включая последнюю бету.
parseInt(dragObject.style.top);


Это строка должна отдавать насколько была сдвинута карта, но в chrome она всегда отдает 0

Готов заплатить за решение данной пробелмы


вот полный код Jquery плагина формирующего tooltip'ы
//
//
//
function MapTooltip(map, tip, onBeforeShow, onBeforeHide) {
  // Don't forget the tip
  var $tooltip = tip;
  // One timer
  var timer = 0;
  // Don't loose our scope
  var self = this;
  // xy position
  var overlay = get_overlay(map);

  if(!$tooltip.hasClass('tooltip-enabled')) {
    // Mouse enter
    $tooltip.bind('mouseenter.tooltip', function(e) {
      stopTimer();
    });

    // Mouse leave
    $tooltip.bind('mouseleave.tooltip', function(e) {
      startTimer(function() { self.hide(200) }, 100);
    });

    $tooltip.addClass('tooltip-enabled');
  }

  // 
  // We need this overlay for getting the markers position
  //
  function get_overlay(map) {
    function ProjectionHelperOverlay(map) {
      this.setMap(map);
    }

    ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
    ProjectionHelperOverlay.prototype.draw = function () {
      if (!this.ready) {
        this.ready = true;
        google.maps.event.trigger(this, 'ready');
      }
    }; 
    return new ProjectionHelperOverlay(map);
  }

  function startTimer(callback, time) {
    stopTimer();
    timer = setTimeout(callback, time);
  }

  function stopTimer() {
    clearTimeout(timer);
  }

  this.show = function(marker) {
    // Hide 
    self.hide(0);
	
    $tooltip.data('MapTooltips.marker', marker);

    // Callback 
    onBeforeShow(marker, $tooltip);

    // Map world relative to map container
    // TODO This needs to be configurable and more exact
    var p = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
    var dragObject = overlay.getPanes().mapPane.parentNode;
    var x = p.x + parseInt(dragObject.style.left); 
    var y = p.y + parseInt(dragObject.style.top); 

    $tooltip.css({ 
      position: "absolute",
      'z-index': 20000,
      top: y, left: x 
    });

    $tooltip.animate({"top": "+=20px", "opacity": "toggle"}, 100);  
  }

  this.hide = function(time) {
    var marker = $tooltip.data('MapTooltips.marker');

    if(marker && typeof onBeforeHide == 'function') {
      onBeforeHide(marker, $tooltip);
    }
    $tooltip.fadeOut(time);
  }

  this.addMarker = function(marker) {
    google.maps.event.addListener(marker, 'mouseover', function(event) {
      startTimer(function(){ self.show(marker) }, 100);
    });

    google.maps.event.addListener(marker, 'mouseout', function(event) {
      startTimer(function() { self.hide(200) }, 0);
    });
  }
};

Последний раз редактировалось sshz, 13.12.2009 в 11:38.
Ответить с цитированием