为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?

推荐答案

协助这一点。以下是一些示例：使用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).

上述链接中的代码采用不同的路由实现类似的效果。它的要点是，直接对InfoWindow进行风格化并不容易，并且可能更容易使用额外的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项目页< a>。

InfoBubble's Github project page.

与InfoWindow相比，InfoBubble非常符合风格：

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自定义示例扩展了来自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屋！