Question

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

Answer 1

编辑经过一番狩猎，这似乎是最好的选择：

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

您可以在Dive Seven, a website for online scuba dive logging上看到此InfoBubble的自定义版本。它看起来像这样：

Google provide a demo，其中显示了如何实施自定义信息窗口。它需要相当数量的代码，但似乎非常简单。

还有一些例子here。但是，它们看起来并不像截图中的示例那么好。

Answer 2

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

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

这里的＆lt; p＆gt; element将充当实际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

下面的代码可以帮助你。

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

这是一篇文章＆lt; How to locate multiple addresses on google maps with perfect zoom＆gt;这有助于我实现这一目标。你可以参考它来处理JS Fiddle链接和完整的例子。

Answer 6

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

Answer 7

您可以使用以下代码删除样式默认的inforwindow。在为inforwindow使用HTML代码之后：

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

Answer 8

你甚至可以在弹出容器/画布上附加你自己的css类，或者你想要什么。当前的谷歌地图3.7有由canvas元素设置的弹出窗口，它在代码中预装了popup div容器。所以在googlemaps 3.7你可以通过popup的domready事件进入渲染过程：

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

IE8中没有

element.previousElementSibling-所以如果你想让它工作，follow this。

check the latest InfoWindow reference了解更多活动..

我发现在某些情况下这个最干净。

Answer 9

以下是基于google上当前信息窗口示例的纯CSS解决方案：

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

这是一个适用于小信息窗口的快速解决方案。如果有帮助，请不要忘记投票：P

Answer 10

我认为我提出的最佳答案是： https://codepen.io/sentrathis96/pen/yJPZGx

我不能相信这一点，我从另一个codepen用户那里分配了这个来修复google maps依赖项以实际加载

记下致电：

NSObject

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

10 个答案: