Question

InfoWindow的唯一问题是我没有办法自定义它的外观（即泡泡，而不是它的内容）。似乎唯一的方法是制作我自己的Overlay和样式。但这给我带来了一些问题，例如无法选择文本（将鼠标悬停在此叠加层上只是平移地图）或滚动（如果叠加层有一个带有溢出文本的div，则滚动会导致地图放大或缩小，点击滚动条将滚动，但它会同时平移地图。）

我正在捕捉mouseover和mouseout事件以禁用/启用拖动和缩放，但我仍然无法突出显示文本，现在滚动鼠标滚轮在覆盖区域没有任何滚动的区域导致页面地图外的元素向上移动。

还有其他人遇到过这样的情况吗？我还没有看到其他任何真正涵盖这一点的东西，我试图不想撕掉我的头发试图寻找解决方案。

Answer 1

好消息。看起来我在Firefox中遇到的问题是由于我的叠加高度比地图容器大，并假设谷歌地图在某处设置了

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

也许你可以通过创建使用相对CSS定位来隐藏/覆盖气泡的内容来解决无法自定义气泡的问题？

另外，（在黑暗中拍摄），我不确定，但是你可以自定义一个标记并将其破坏成某种InfoWindow吗？

Answer 4

我需要使用滚动覆盖，但出于某种原因，Daniel的停止事件传播的解决方案对我不起作用。过了一会儿，我提出了另一种解决方案。

这假设您使用的是Google Maps V3和jQuery。

首先，禁用地图中的滚动：

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

然后，使用mouse wheel handler plugin将滚动带回来，但仅在您需要时：

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

如何使Google地图自定义叠加层对象的行为类似于InfoWindow？

4 个答案: