谷歌地图:如何创建自定义信息窗口?

IT技术 javascript html css google-maps
2021-02-13 04:18:35

地图标记的默认 Google Maps InfoWindow 非常圆。如何创建带有方角的自定义信息窗口?

6个回答

编辑经过一番寻找,这似乎是最好的选择:

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

您可以看到我在Dive Seven(一个在线水肺潜水日志记录网站)上使用的 InfoBubble 的定制版本它看起来像这样:


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

@TWilly,谢谢。该项目移至 GitHub。我已经更新了网址。
2021-04-05 04:18:35
请更新您的链接和演示地图,因为它们不起作用。
2021-04-07 04:18:35

您可以单独使用 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 类或者只是添加一个新元素。

玩弄元素以获得您需要的东西......

@PhilippeLavoie 您可以在每次创建新信息窗口时向 id 添加计数。
2021-03-18 04:18:35
这是一个肮脏的黑客,可能随时停止工作!
2021-03-27 04:18:35
黑客 - 当然。天才 - 绝对!
2021-04-04 04:18:35
肯定会在页面中重复的元素的 ID,这不是一个好习惯。ID 在页面中应该是唯一的。
2021-04-06 04:18:35

我发现 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

你的链接已经死了。
2021-04-04 04:18:35

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

代码像往常一样创建信息窗口(不需要插件、自定义覆盖或大量代码),使用带有 id 的 div 来保存内容。这在系统中提供了一个钩子,我们可以使用它来获取正确的元素以使用简单的外部样式表进行操作。

有一些额外的部分(不是严格需要的)可以处理诸如将钩子放入带有关闭信息窗口图像的 div 之类的事情。

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

如果您想将其更改为 jquery(不知道为什么要这样做),那么这应该相当简单。

我通常不是 javascript 开发人员,因此欢迎提出任何想法、评论和批评:)

我不知道你是否听说过,但是当你在电脑上写字时,这些叫做“输入”和“空间”的新东西实际上会创造空间。通常在将内容编写为代码时很有用,这样您的眼睛就不会因尝试阅读而流血:)
2021-04-11 04:18:35

下面的一段代码可以帮助你。

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

这是一篇文章<如何使用完美缩放在谷歌地图上定位多个地址>帮助我实现了这一目标。您可以参考它的工作 JS Fiddle 链接和完整示例。