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

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

2010-10-05 SarahBeale

我我一个链接到的东西，看起来相当定制的答案更新。你可以选择你自己的半径和其他设置。 – 2010-10-07 21:44:06

[看看这个答案]（http：// stackoverflow。com/a/7628522/881250）创建自定义信息框的另一个示例 – Donamite 2013-07-26 17:58:10

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

2010-10-05 02:28:16

自定义OVerlay是否具有与正常Google地图标记相同的所有属性？意思是，我仍然可以通过自定义覆盖**来执行setIcon，setZIndex等**或**是否必须重新实现所有这些功能？ – SarahBeale 2010-10-05 03:57:00

不，自定义叠加层只允许在地图上渲染的基本功能，如果你想setIcon，setZindex等，你将不得不自己实现它们。 – 2012-10-08 09:06:14

编辑一些狩猎周围后，这似乎是最好的选择：

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

你可以看到这个InfoBubble我对Dive Seven, a website for online scuba dive logging使用的定制版本。它看起来像这样：

谷歌provide a demo，说明如何实现自定义信息窗口。它需要相当数量的代码，但似乎非常简单。

还有一些例子here。不过，它们绝对不像屏幕截图中的示例那么好看。

来源

2010-10-05 03:16:43

@Tilly，谢谢。该项目转移到GitHub。我更新了网址。 – 2016-05-21 13:57:17

我发现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在你的页面

来源

2012-02-13 07:37:01

你的链接已经死了。 – Netsi1964 2017-01-18 07:40:54

你甚至可以附加在弹出的容器/画布上自己的CSS类或你想怎样。当前谷歌地图3.7弹出窗口样式的元素，它代表弹出div容器的代码。因此，在谷歌地图3.7，您可以进入通过弹出的domready中事件这样的渲染过程：所以如果你想让它在它的工作，follow this

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'; 
    } 
    } 
});

element.previousElementSibling根本不存在IE8-。

check the latest InfoWindow reference事件以及更多......

我发现在某些情况下，最干净的。

来源

2012-04-14 09:26:23 palmic

可以修改使用jQuery独自整个信息窗口...

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

这里<p>元素将作为一个钩到实际的信息窗口。一旦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类或者只是添加一个新的元素。

与元素玩得到你所需要的...

来源

2012-12-18 07:09:19 ATOzTOA

这是一个肮脏的黑客，可以随时停止工作！ – billy 2014-02-04 21:07:57

破解 - 当然。天才 - 绝对！ – 2014-04-07 23:39:27

确实会在页面中重复的元素的ID，这不是一个好习惯。 ID在页面中应该是唯一的。 – 2014-12-01 17:46:45

样式化的信息窗口与香草的javascript非常简单。在写这篇文章时，我使用了这个线程中的一些信息。我也考虑过早期版本的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'; 
    } 
});

的代码创建信息窗口照常（无需插件，自定义叠加或巨大的代码），使用一个div一个id持有的内容。这为系统提供了一个钩子，我们可以使用这个钩子来获取正确的元素来使用简单的外部样式表进行操作。

有一些额外的部分（并不是严格需要的），它们处理的事情就像给它一个关闭信息窗口图像的div钩。

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

如果你想改变它为jquery（不知道为什么你会），那应该是相当简单的。

我通常不是一个JavaScript开发，因此任何想法，意见，批评欢迎:)

来源

2013-02-26 09:23:04 Rafe

我不知道你是否听说过，但有一些新的东西叫做“进入”和“空间”，当你在电脑上写字时，它们实际上会产生空间。将代码编写为代码时通常很有用，所以您的眼睛不会因尝试阅读而流血:) – Chrillewoodz 2016-09-26 06:29:56

下面的代码可以帮助你。

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

这里是一个文章< How to locate multiple addresses on google maps with perfect zoom>，帮助我实现了这一点。你可以参考它的工作JS小提琴链接和完整的例子。

来源

2014-04-11 08:37:06

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

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

来源

2016-01-11 09:31:47

删除样式默认的inforwindows - 现在是所有SO的最佳解决方案 – djdance 2016-12-18 20:00:17

这是基于当前的信息窗口例如在谷歌一个纯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

来源

2016-06-27 11:18:01 Patch92

我认为最好的答案，我想出来的是在这里： https://codepen.io/sentrathis96/pen/yJPZGx

我不能把信贷对于这一点，我分叉从另一个codepen用户修复谷歌地图的依赖，以实际加载的通话

请记到：

InfoWindow() // constructor

来源

2016-07-12 03:38:51 NomNomCameron

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

回答

相关问题