2

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

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

有没有其他人遇到过这样的情况？我还没有看到任何其他内容实际上涵盖了这一点，我试图不扯掉我的头发试图找到一个解决方案。

4

4 回答 4

1

答案在 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();
      }
    }
  }
}
于 2011-10-21T22:31:39.847 回答
1

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

溢出：隐藏
某处（我猜不是）。设置它自己解决了这个问题。下一步是让您的覆盖容器捕获点击事件并确保它们不会传播，如 ExtInfoWindow 代码所示：http: //gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/1.0 /src/extinfowindow.js（接近初始化结束）。

于 2009-02-10T16:09:12.147 回答
0

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

另外，（在黑暗中拍摄），我不确定，但您能否自定义一个标记并将其颠覆为一种信息窗口？

于 2009-02-10T13:37:33.963 回答
0

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

这假设您使用的是 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);
  }
});
于 2013-10-21T13:14:31.473 回答