谷歌地图:如何创建自定义InfoWindow？
地图标记的默认谷歌地图InfoWindow是非常圆的。如何创建带方角的自定义InfoWindow？
回答 8
Stack Overflow用户
发布于 2012-12-18 15:09:19
你可以单独使用jquery来修改整个InfoWindow ...
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</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类或者只是添加一个新的元素。
玩弄这些元素来获得你需要的东西...
Stack Overflow用户
发布于 2013-02-26 17:23:05
使用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一个钩子，里面有关闭信息窗口的图像。
最后一个循环隐藏了指针箭头的所有部分。我自己需要这个，因为我想在信息窗口上有透明度，但箭头挡住了我的去路。当然，使用钩子，更改代码以将箭头图像替换为您选择的png也应该相当简单。
如果您想要将其更改为jquery (不知道为什么要这样做)，那么这应该非常简单。
我通常不是一个javascript开发人员，所以欢迎任何想法、评论和批评:)
Stack Overflow用户
发布于 2014-04-11 16:37:07
下面这段代码可能会对你有所帮助。
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的链接和完整的例子。
https://stackoverflow.com/questions/3860277
复制相似问题
腾讯云开发者
