Google地图:如何创建自定义InfoWindow？

Question

地图标记的默认Google Maps InfoWindow非常圆.如何创建带方角的自定义InfoWindow？

Answer 1

编辑经过一些狩猎后,这似乎是最好的选择:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

您可以在Dive Seven上看到这个InfoBubble的定制版本,这是一个在线水肺潜水记录网站.它看起来像这样:

Google 提供了演示如何实现自定义信息窗口的演示.它需要相当数量的代码,但似乎非常简单.

有一些更多的例子在这里.但是,它们看起来并不像屏幕截图中的示例那么好.

Answer 2

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

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

这里<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类或只添加新元素.

玩弄元素来获得你需要的东西......

Answer 3

我发现InfoBox非常适合高级造型.

InfoBox的行为类似于google.maps.InfoWindow,但它支持高级样式的其他几个属性.InfoBox也可以用作地图标签.InfoBox还会触发与google.maps.InfoWindow相同的事件.

包括http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js在你的页面

Answer 4

使用vanilla javascript来设置infowindow的样式相当简单.我在写这篇文章时使用了这个帖子中的一些信息.我还考虑了早期版本的ie可能出现的问题(尽管我没有用它们进行测试).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

代码像往常一样创建infowindow(不需要插件,自定义叠加或巨大的代码),使用带有id的div来保存内容.这给了系统中的一个钩子,我们可以使用它来获得正确的元素来使用简单的外部样式表进行操作.

还有一些额外的部分(不是严格需要的)处理诸如将钩子放入div并且其中包含关闭信息窗口图像的事情.

最后一个循环隐藏了指针箭头的所有部分.我自己需要这个,因为我想在infowindow上保持透明度并且箭头挡住了.当然,使用钩子,更改代码以用您选择的png替换箭头图像也应该相当简单.

如果你想把它改成jquery(不知道你为什么会这样),那么这应该是相当简单的.

我通常不是一个JavaScript开发人员所以任何想法,评论,批评欢迎:)

Answer 5

我不确定 FWIX.com 具体是如何做到的，但我敢打赌他们正在使用Custom Overlays。