如何自定义基本信息窗口,其中使用 Google 地图上的 GInfoWindowTab 显示选项卡

发布于 2024-09-28 17:06:10 字数 783 浏览 6 评论 0原文

我有以下功能使用 GInfoWindowTab 在谷歌地图上显示带有选项卡的信息窗口,默认信息窗口显示有两个选项卡,我的问题是如何更改信息窗口的大小、背景颜色和样式,以及我可以将视频添加到其中吗信息窗口中的选项卡。

function createMarker(point, name, address, imagepath) {
        var marker = new GMarker(point, gicons[imagepath]);

        var html1 = '<span class="name-tab"><b>' + name + '</b></span> <span class="info"><br/>' + address + '</span>';
        var content = '<img width="100" Height="100" src="http://www.visitingdc.com/images/golden-gate-bridge-picture.jpg" />'; 

        GEvent.addListener(marker, 'click', function() {
        var infoTabs = [new GInfoWindowTab("Address", html1), new GInfoWindowTab("Images", content)];
                 marker.openInfoWindowTabsHtml(infoTabs);
      });

I have the following function to display the infowindow with tabs on google map using GInfoWindowTab ,the default infowindow is displayed with two tabs ,my question is how can i change the size ,background color and styles of the infowindow and can i add videos into one of the tab in infowindow.

function createMarker(point, name, address, imagepath) {
        var marker = new GMarker(point, gicons[imagepath]);

        var html1 = '<span class="name-tab"><b>' + name + '</b></span> <span class="info"><br/>' + address + '</span>';
        var content = '<img width="100" Height="100" src="http://www.visitingdc.com/images/golden-gate-bridge-picture.jpg" />'; 

        GEvent.addListener(marker, 'click', function() {
        var infoTabs = [new GInfoWindowTab("Address", html1), new GInfoWindowTab("Images", content)];
                 marker.openInfoWindowTabsHtml(infoTabs);
      });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深空失忆 2024-10-05 17:06:10

尝试

<div id="infoWin" style:"background-color:#000 ;...." > content </div> 

或使用 css/style.css 中的类

关于选项卡中的视频,是的,您可以嵌入视频的链接

google.maps.event.addListener(marker, "click", function(){
    bubble = new google.maps.InfoWindow({
      content: '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UmFjNiiVk9w?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UmFjNiiVk9w?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
    })
    bubble.open(map, marker);
})

try

<div id="infoWin" style:"background-color:#000 ;...." > content </div> 

or use a class from your css/style.css

About videos in the tabs,yes you can embed a link for a video

google.maps.event.addListener(marker, "click", function(){
    bubble = new google.maps.InfoWindow({
      content: '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UmFjNiiVk9w?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UmFjNiiVk9w?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
    })
    bubble.open(map, marker);
})
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文