如何向使用 extInfoWindows 进行谷歌地图的 infowindow 添加选项卡

发布于 2024-09-28 10:34:42 字数 571 浏览 4 评论 0原文

我有以下代码,用于在单击标记时在谷歌地图上显示信息窗口,如何向使用 extinfowindows 的 infowindows 添加选项卡,任何人都可以帮助找出问题。

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

    GEvent.addListener(marker, 'click', function () {
        marker.openExtInfoWindow(
        map, "simple_example_window", html1, {
            beakOffset: -4
        });
    });
}

I have the following code to display the info window on the google map when marker is clicked how can i add tabs to the infowindows which is using extinfowindows ,can anyone help to trace out the problem.

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

    GEvent.addListener(marker, 'click', function () {
        marker.openExtInfoWindow(
        map, "simple_example_window", html1, {
            beakOffset: -4
        });
    });
}

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

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

发布评论

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

评论(1

黑寡妇 2024-10-05 10:34:42

注意:GMaps v3.0 不支持选项卡,

请检查此项

http://www.svennerberg .com/2009/02/working-with-info-windows-in-google-maps/

但是我们可以使用 JQuery 将其用于 V3.0,这里是代码示例

    var contentString = [
  '<div id="tabs">',
  '<ul>',
    '<li><a href="#tab-1"><span>One</span></a></li>',
    '<li><a href="#tab-2"><span>Two</span></a></li>',
    '<li><a href="#tab-3"><span>Three</span></a></li>',
  '</ul>',
  '<div id="tab-1">',
    '<p>Tab 1</p>',
  '</div>',
  '<div id="tab-2">',
   '<p>Tab 2</p>',
  '</div>',
  '<div id="tab-3">',
    '<p>Tab 3</p>',
  '</div>',
  '</div>'
].join('');

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
  $("#tabs").tabs();
});

Note:tabs are not supported for GMaps v3.0

check this

http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/

But we can make it for V3.0 using JQuery here is sample of code

    var contentString = [
  '<div id="tabs">',
  '<ul>',
    '<li><a href="#tab-1"><span>One</span></a></li>',
    '<li><a href="#tab-2"><span>Two</span></a></li>',
    '<li><a href="#tab-3"><span>Three</span></a></li>',
  '</ul>',
  '<div id="tab-1">',
    '<p>Tab 1</p>',
  '</div>',
  '<div id="tab-2">',
   '<p>Tab 2</p>',
  '</div>',
  '<div id="tab-3">',
    '<p>Tab 3</p>',
  '</div>',
  '</div>'
].join('');

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
  $("#tabs").tabs();
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文