Google maps 如何使Google Maps自定义覆盖对象的行为类似于信息窗口？

我对InfoWindow的唯一问题是，我没有办法自定义它的外观（即气泡，而不是它的内容）。看来，唯一的办法是做我自己的覆盖和风格，而不是。但这给我带来了一些问题，比如无法选择文本（将鼠标拖动到该覆盖上只是平移地图）或滚动（如果覆盖上有一个div，文本溢出，则滚动会导致地图放大或缩小，单击滚动条将滚动，但同时平移地图）

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

---

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

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

---

另外，（在黑暗中拍摄），我不确定，但是你可以定制一个标记并将其转换成一个信息窗口吗？

好消息。看起来我在Firefox中遇到的问题是因为我的覆盖层比地图容器的高度大，并且假设Google Maps设置了overflow:hidden Anywhere（我猜不是）。我自己定的。下一步是让你的覆盖容器捕捉点击事件，并确保它们不会像ExterfoWindow代码所示那样传播：（在初始化的末尾附近）。

答案在niiko指向ExterfoWindow代码的链接中。我已将其拉出并插入到骨架自定义覆盖中：

overflow: hidden

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

---

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

这假设您使用的是GoogleMapsV3和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);
  }
});

---

“也许你可以通过创建使用相对CSS定位来隐藏/覆盖气泡的内容来解决无法自定义气泡的问题？”我想避免这种情况，因为我们希望IE6也能使用，但这听起来是我最好的选择。