样式化谷歌地图信息窗口

Question

我一直在尝试设置我的 Google 地图 InfoWindow 的样式，但该主题的文档非常有限。你如何设计 InfoWindow ？

原文由 Victor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

谷歌写了一些代码来帮助解决这个问题。以下是一些示例： 使用 InfoBubble 、 样式化标记 和 自定义信息窗口（使用 OverlayView）的示例。

上面链接中的代码采用不同的路线来实现相似的结果。它的要点是直接设置 InfoWindows 的样式并不容易，使用附加的 InfoBubble 类而不是 InfoWindow 或覆盖 GOverlay 可能更容易。另一种选择是使用 javascript（或 jQuery）修改 InfoWindow 的元素，就像后来的 ATOzTOA 建议的那样。

这些示例中最简单的可能是使用 InfoBubble 而不是 InfoWindow。 InfoBubble 可通过导入此文件（您应该自己托管）获得： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble 的 Github 项目页面。

与 InfoWindow 相比，InfoBubble 非常有风格：

  infoBubble = new InfoBubble({
      map: map,
      content: '<div class="mylabel">The label</div>',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: 'transparent',
      arrowStyle: 2
});

infoBubble.open();

您还可以使用给定的地图和标记调用它以打开：

 infoBubble.open(map, marker);

作为另一个示例，Info Window Custom 示例从 Google Maps API 扩展了 GOverlay 类，并将其用作创建更灵活的信息窗口的基础。它首先创建类：

 /* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

之后它继续覆盖 GOverlay：

 InfoBox.prototype = new google.maps.OverlayView();

然后，您应该覆盖您需要的方法： createElement 、 draw 、 remove 和 panMap 。它相当复杂，但理论上您现在只是自己在地图上绘制一个 div，而不是使用普通的信息窗口。

原文由 Herman Schaaf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以单独使用 jquery 修改整个 InfoWindow …

 var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

这里的

元素将充当实际 InfoWindow 的挂钩。一旦 domready 触发，该元素将变为活动状态并可使用 javascript/jquery 访问，例如 $('#hook').parent().parent().parent().parent() 。

下面的代码只是在 InfoWindow 周围设置了一个 2 像素的边框。

 google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

您可以执行任何操作，例如设置新的 CSS 类或仅添加新元素。

玩弄元素以获得您需要的东西……

原文由 ATOzTOA 发布，翻译遵循 CC BY-SA 3.0 许可协议