Javascript 谷歌地图：如何创建自定义信息窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3860277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps: How to create a custom InfoWindow?
提问by SarahBeale
The default Google Maps InfoWindow for a map marker is very round. How do I create a custom InfoWindow with square corners?
地图标记的默认 Google Maps InfoWindow 非常圆。如何创建带有方角的自定义信息窗口？
回答by Drew Noakes
EDITAfter some hunting around, this seems to be the best option:
编辑经过一番寻找，这似乎是最好的选择：
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
You can see a customised version of this InfoBubble that I used on Dive Seven, a website for online scuba dive logging. It looks like this:
你可以看到这个 InfoBubble 的定制版本，我在Dive Seven上使用过，这是一个在线水肺潜水日志记录网站。它看起来像这样：
There are some more examples here. They definitely don't look as nice as the example in your screenshot, however.
有一些更多的例子在这里。但是，它们看起来肯定不如屏幕截图中的示例那么好。
回答by ATOzTOA
You can modify the whole InfoWindow using jquery alone...
您可以单独使用 jquery 修改整个 InfoWindow ...
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</p>'
});
Here the <p> element will act as a hook into the actual InfoWindow. Once the domready fires, the element will become active and accessible using javascript/jquery, like $('#hook').parent().parent().parent().parent().
此处 <p> 元素将充当连接到实际 InfoWindow 的钩子。一旦 domready 触发，该元素将变为活动状态并可使用 javascript/jquery 访问，例如$('#hook').parent().parent().parent().parent().
The below code just sets a 2 pixel border around the InfoWindow.
下面的代码只是在 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');
}
}
});
You can do anything like setting a new CSS class or just adding a new element.
你可以做任何事情，比如设置一个新的 CSS 类或者只是添加一个新元素。
Play around with the elements to get what you need...
玩弄元素以获得您需要的东西......
回答by Maulik Bengali
I found InfoBox perfect for advanced styling.
我发现 InfoBox 非常适合高级样式。
An InfoBox behaves like a google.maps.InfoWindow, but it supports several additional properties for advanced styling. An InfoBox can also be used as a map label. An InfoBox also fires the same events as a google.maps.InfoWindow.
InfoBox 的行为类似于google.maps.InfoWindow，但它支持多个用于高级样式的附加属性。InfoBox 也可以用作地图标签。InfoBox 也会触发与google.maps.InfoWindow相同的事件。
Include http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.jsin your page
在您的页面中包含http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js
回答by Rafe
Styling the infowindow is fairly straightforward with vanilla javascript. I used some of the info from this thread when writing this. I also took into account the possible problems with earlier versions of ie (although I have not tested it with them).
使用 vanilla 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';
}
});
The code creates the infowindow as usual (no need for plugins, custom overlays or huge code), using a div with an id to hold the content. This gives a hook in the system that we can use to get the correct elements to manipulate with a simple external stylesheet.
代码像往常一样创建信息窗口（不需要插件、自定义覆盖或大量代码），使用带有 id 的 div 来保存内容。这在系统中提供了一个钩子，我们可以使用它来获取正确的元素以使用简单的外部样式表进行操作。
There are a couple of extra pieces (that are not strictly needed) which handle things like giving a hook into the div with the close info window image in it.
有一些额外的部分（不是严格需要的）可以处理诸如将钩子放入带有关闭信息窗口图像的 div 之类的事情。
The final loop hides all the pieces of the pointer arrow. I needed this myself as I wanted to have transparency on the infowindow and the arrow got in the way. Of course, with the hook, changing the code to replace the arrow image with a png of your choice should be fairly simple too.
最后一个循环隐藏了指针箭头的所有部分。我自己需要这个，因为我想在信息窗口上有透明度并且箭头挡住了。当然，使用钩子，更改代码以使用您选择的 png 替换箭头图像也应该相当简单。
If you want to change it to jquery (no idea why you would) then that should be fairly simple.
如果您想将其更改为 jquery（不知道为什么要这样做），那么这应该相当简单。
I'm not usually a javascript developer so any thoughts, comments, criticisms welcome :)
我通常不是 javascript 开发人员，因此欢迎提出任何想法、评论和批评:)
回答by Ashish Gupta
Below piece of code may help you out.
下面的一段代码可以帮助你。
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));
Here is an article < How to locate multiple addresses on google maps with perfect zoom> that helped me achieved this. You can refer it for working JS Fiddle link and complete example.
这是一篇文章<如何使用完美缩放在谷歌地图上定位多个地址>帮助我实现了这一目标。您可以参考它的工作 JS Fiddle 链接和完整示例。
回答by Teo Em
You can use code below to remove style default inforwindow. After you can use HTML code for inforwindow:
您可以使用下面的代码删除样式默认信息窗口。在您可以为 infowindow 使用 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
});
回答by Scott Mitchell
I'm not sure how FWIX.com is doing it specifically, but I'd wager they are using Custom Overlays.
我不确定 FWIX.com 是如何具体做到这一点的，但我敢打赌他们正在使用Custom Overlays。
回答by palmic
You can even append your own css class on the popup container/canvas or how do you want. Current google maps 3.7 has popups styled by canvas element which prepends popup div container in code. So at googlemaps 3.7 You can get into rendering process by popup's domready event like this:
您甚至可以在弹出容器/画布上附加您自己的 css 类或您想要的方式。当前的谷歌地图 3.7 具有由 canvas 元素设计的弹出窗口，该元素在代码中添加了弹出 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';
}
}
});
element.previousElementSibling is not present at IE8- so if you want to make it work at it, follow this.
element.previousElementSibling 不存在于 IE8- 所以如果你想让它工作，请遵循这个。
check the latest InfoWindow referencefor events and more..
查看最新的 InfoWindow 参考以了解事件等。
I found this most clean in some cases.
在某些情况下，我发现这是最干净的。
回答by Patch92
Here is a pure CSS solution based on the current infowindow example on google:
这是一个基于谷歌当前 infowindow 示例的纯 CSS 解决方案：
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
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;
}
This is a quick solution that will work well for small info windows. Don't forget to up vote if it helps :P
这是一个快速解决方案，适用于小型信息窗口。如果有帮助，请不要忘记投票：P
回答by NomNomCameron
I think the best answer I've come up with is here: https://codepen.io/sentrathis96/pen/yJPZGx
我认为我想出的最佳答案在这里：https: //codepen.io/sentrathis96/pen/yJPZGx
I can't take credit for this, I forked this from another codepen user to fix the google maps dependency to actually load
我不能相信这一点，我是从另一个 codepen 用户那里分叉出来的，以修复 google maps 依赖项以实际加载
Make note of the call to:
记下调用：
InfoWindow() // constructor
