Question

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

当我在mousehover事件上调用cTooltip时，它正在工作，但是当我在循环内部直接调用它时，可以看到第一个工具提示，但是在第二个循环错误到来之后

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

错误如下所示，上面的鼠标悬停事件中的编写代码正在运行，但我想在加载地图后显示所有标记上的所有工具提示，而不是使用鼠标悬停事件。

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.

Answer 1

不要自己调用draw - 方法，它会在以下时间自动调用：

您将叠加层添加到地图
地图的视口更改

使用OverlayView时的工作流程如下：

调用构造函数（在本例中为cMarker），在构造函数中设置叠加层的属性（将通过代码中的this.setValues(opt_options);完成）
当你设置覆盖的map - 属性时（应该在构造函数中完成，因为你想最初绘制叠加层），API会自动调用onAdd - 方法
在onAdd - 方法中创建节点（包含所需内容并另外添加事件侦听器）并将其添加到MapPane
自动调用draw-method（正如我在onAdd()之后或视口更改时所说的那样）。仅使用此方法更新CSS位置（或者当您希望大小依赖于地图缩放时，还可以使用CSS大小）

此工作流程可确保： 1.当调用onAdd()时，mapPanes就绪 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*/});

但是这种自定义实现毫无意义，因为在投影可用时会自动调用draw方法。

所有标记上的Google Map标记工具提示，TypeError：投影未定义

1 个答案: