样式化 Google 地图信息窗口 [英] Styling Google Maps InfoWindow

问题描述

我一直在尝试设计我的 Google 地图的样式 InfoWindow，但是关于这个主题的文档非常有限.你如何设计 InfoWindow 的样式?

I've been attempting to style my Google Maps InfoWindow, but the documentation is very limited on this topic. How do you style an InfoWindow?

推荐答案

Google 编写了一些代码来帮助解决这个问题.以下是一些示例:使用 InfoBubble 的示例、样式标记 和 信息窗口自定义(使用 OverlayView).

Google wrote some code to assist with this. Here are some examples: Example using InfoBubble, Styled markers and Info Window Custom (using OverlayView).

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

The code in the links above take different routes to achieve similar results. The gist of it is that it is not easy to style InfoWindows directly, and it might be easier to use the additional InfoBubble class instead of InfoWindow, or to override GOverlay. Another option would be to modify the elements of the InfoWindow using javascript (or jQuery), like later ATOzTOA suggested.

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

Possibly the simplest of these examples is using InfoBubble instead of InfoWindow. InfoBubble is available by importing this file (which you should host yourself): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble 的 Github 项目页面.

InfoBubble 与 InfoWindow 相比非常有风格:

InfoBubble is very stylable, compared to InfoWindow:

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

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

You can also call it with a given map and marker to open on:

infoBubble.open(map, marker);

再举一个例子，Info Window Custom 示例扩展了 Google Maps API 的 GOverlay 类，并将其用作创建更灵活的信息窗口的基础.它首先创建类:

As another example, the Info Window Custom example extends the GOverlay class from the Google Maps API and uses this as a base for creating a more flexible info window. It first creates the class:

/* 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:

after which it proceeds to override GOverlay:

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

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

You should then override the methods you need: createElement, draw, remove and panMap. It gets rather involved, but in theory you are just drawing a div on the map yourself now, instead of using a normal Info Window.

这篇关于样式化 Google 地图信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！