样式化Google Maps InfoWindow

大佬教程收集整理的这篇文章主要介绍了样式化Google Maps InfoWindow，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决样式化Google Maps InfoWindow？

开发过程中遇到样式化Google Maps InfoWindow的问题如何解决？下面主要结合日常开发的经验，给出你关于样式化Google Maps InfoWindow的解决方法建议，希望对你解决样式化Google Maps InfoWindow有所启发或帮助；

Google编写了一些代码来协助完成此任务。以下是一些示例：使用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);

作为另一个示例，“信息窗口自定义”示例从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，而不是使用普通的信息窗口。

解决方法

大佬总结

以上是大佬教程为你收集整理的样式化Google Maps InfoWindow全部内容，希望文章能够帮你解决样式化Google Maps InfoWindow所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。