Подсказка для маркера Google Map на всех маркерах, ошибка TypeError: проекция не определена

Question

Подсказка для маркера Google Map на всех маркерах, ошибка TypeError: проекция не определена

0

cTooltip.prototype = new google.maps.OverlayView;

cTooltip.prototype.draw1 = function(pos, content, margin){
  var div = this.div_;
  div.style.cssText = 'z-index:9999;cursor:pointer;visibility:hidden;position:absolute;text-align:center;margin:'+margin;
  if(content){
    div.innerHTML = content;
  }
  if(pos){

    $(markers_sets).each(function () {
       if (this.id == per.markers_set) {
            m_settings = this.settings;
       }
    });

    var markersOffset = (typeof m_settings.markers_offset !== 'undefined' ? parseInt(m_settings.markers_offset) : 7);

    var width = $('.vipul_'+tooltipCount).outerWidth() / 2;
    pin_center = 56 - width;
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(pos);
    div.style.left = (position.x - 64 + pin_center + markersOffset) + 'px';
    div.style.top = (position.y - 40) + 'px';
    div.style.visibility = 'visible';
  }

tooltipCount++;
}

Когда я вызываю cTooltip на событие mousehover, его работа, но когда я вызываю его непосредственно внутри цикла, можно увидеть первую всплывающую подсказку, но после появления второй ошибки цикла

div.onmouseover = function() {
      if (tool_tip_timeout != null) {
        clearTimeout(tool_tip_timeout);
        tool_tip_timeout = null;
      }
      if (display_tip && !this.hasClass('hideTooltip')) {
        var tool_tip_html ='';
        tool_tip_html += '<div class="maptive-bubble-blue vipul_'+tooltipCount+'">';
        tool_tip_html += '<div class="maptive-bubble-pin-container">';
        tool_tip_html += '<div class="maptive-bubble-text">' + getTooltip(pos) + '</div>';
        tool_tip_html += '<div class="maptive-bubble-pin"></div>';
        tool_tip_html += '</div>';
        tool_tip_html += '<div class="maptive-bubble-shadow"><img src="/ver4/images/bubble-shadow.png"></div>';
        tool_tip_html += '</div>';
        tool_tip_timeout = setTimeout(function() {
          //tooltip.draw1(new google.maps.LatLng(parseFloat(l[marker_lat_i]), parseFloat(l[marker_lng_i])), tool_tip_html, '-' + (parseInt(md.groups_top)) + 'px 0px 0px ' + Math.abs(parseInt(md.groups_left) - parseInt(md.groups_width) - 3) + 'px');
          tooltip.draw1(new google.maps.LatLng(parseFloat(l[marker_lat_i]), parseFloat(l[marker_lng_i])), tool_tip_html, '-' + (parseInt(md.groups_top) + 6) + 'px 0px 0px 0px');
        }, 500);
      }
      display_tip = false;
    };

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

TypeError: projection is undefined

var position = projection.fromLatLngToDivPixel(pos);

Остальная часть кода

function cMarker(opt_options) {
  this.setValues(opt_options);
  var group = this.get('group');
  var unique_groups = this.get('unique_groups');
  var l = this.get('data');
  var descr = this.get('description');
  var pos = this.get('pos');
  var tooltip = this.tooltip = this.get('tooltip');
  this.r = pos;
  var div = this.div_ = document.createElement('div');
  var mb = parseInt(md.markers_top) + 40;




   div.onmouseover = function() {
      if (tip_content != "") {
        if (tool_tip_timeout != null) {
          clearTimeout(tool_tip_timeout);
          tool_tip_timeout = null;
        }
        if (display_tip && !this.hasClass('hideTooltip')) {
        var tool_tip_html ='';
        tool_tip_html += '<div class="maptive-bubble-blue vipul_'+tooltipCount+'">';
        tool_tip_html += '<div class="maptive-bubble-pin-container">';
        tool_tip_html += '<div class="maptive-bubble-text">' + tip_content + '</div>';
        tool_tip_html += '<div class="maptive-bubble-pin"></div>';
        tool_tip_html += '</div>';
        tool_tip_html += '<div class="maptive-bubble-shadow"><img src="/ver4/images/bubble-shadow.png"></div>';
        tool_tip_html += '</div>';
          tool_tip_timeout = setTimeout(function() {
            tooltip.draw(new google.maps.LatLng(parseFloat(l[marker_lat_i]), parseFloat(l[marker_lng_i])), tool_tip_html, '-' + (parseInt(md.markers_top) + 6) + 'px 0px 0px 0px');
          }, 500);
        }
        display_tip=false;
      }
    };
}

I want to draw tooltip on all markers, that why instead of mousehover I need to call it on load event or by simply by placing it outside that mousehover event but error is projection is undefined after displaying one tooltip.

Vipul Sharma 10 март 2014, в 10:56

Источник

0

где вы называете draw1 ? (этот метод не будет вызываться автоматически API)
Dr.Molle 10 март 2014, в 09:13
0

Я вызываю это событие mousehover, пожалуйста, проверьте выше написанное событие mousehover. Это событие вызывается внутри функции cMarker () {}, где cMarker инициализируется с использованием такого прототипа, как этот cMarker.prototype = new google.maps.OverlayView;
Vipul Sharma 10 март 2014, в 09:18
0

Это не было там до вашего редактирования. Тем не менее, теперь не ясно, что именно tooltip , опубликовать полный код
Dr.Molle 10 март 2014, в 09:26
0

да, пожалуйста, проверьте сейчас, я отредактировал это снова.
Vipul Sharma 10 март 2014, в 09:34

Показать ещё 2 комментария

Теги:

javascript

jquery

google-maps

google-maps-api-3

1 ответ

Ещё вопросы

где вы называете draw1 ? (этот метод не будет вызываться автоматически API)
Я вызываю это событие mousehover, пожалуйста, проверьте выше написанное событие mousehover. Это событие вызывается внутри функции cMarker () {}, где cMarker инициализируется с использованием такого прототипа, как этот cMarker.prototype = new google.maps.OverlayView;
Это не было там до вашего редактирования. Тем не менее, теперь не ясно, что именно tooltip , опубликовать полный код
да, пожалуйста, проверьте сейчас, я отредактировал это снова.

Dr.Molle · Accepted Answer · 2014-03-10T09-51-00.000Z

Не вызывайте draw -method самостоятельно, она будет вызываться автоматически, когда:

вы добавляете оверлей к карте
видовой экран карты меняется

Рабочий процесс при работе с OverlayView следующий:

вызовите конструктор (cMarker в этом случае), в конструкторе задайте свойства наложения (это будет сделано через this.setValues(opt_options); в вашем коде)
когда вы устанавливаете map -property наложения (это должно быть сделано внутри конструктора, потому что вы хотите нарисовать оверлеи изначально), API автоматически вызовет onAdd -method
В onAdd создайте узел (с нужным контентом и дополнительно добавленными event-listeners) и добавьте его в MapPane
ничья -method вызывается автоматически (как я сказал изначально после onAdd() или при изменении области просмотра). Используйте этот метод только для обновления позиции CSS (или, кроме того, размера CSS, если вы хотите, чтобы размер зависел от масштабирования карты)

Этот рабочий процесс гарантирует, что: 1. mapPanes готовы, когда onAdd() будет вызываться 2. проекция доступна при вызове draw()

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

  google.maps.event.addListenerOnce(yourOverlayInstance,'panes_changed',
   function(){/*create node with content and events , 
                add it to a pane ,
                set position and optinally the size*/});

Но этот вид пользовательской реализации не имеет смысла, потому что ничья -method будет вызываться автоматически, когда проекция доступна.