javascript - 单击新标记时，Infobubble 选项卡不会重置-6ren

javascript - 单击新标记时，Infobubble 选项卡不会重置

转载作者：行者123 更新时间：2023-11-28 02:06:43

我正在使用 api V3 的带有选项卡的 infobubble。第一个标记一切正常，3 个选项卡显示正确的数据。然后单击另一个标记，第一个标记选项卡将显示数据以及新的标记 3 个选项卡，因此当您单击第二个标记时，最终会出现 6 个选项卡。当您单击第三个标记时，窗口将关闭，然后会出现新的标记信息气泡，其中包含前 6 个选项卡，然后是该标记的新 3 个选项卡，因此每次新单击时最终会出现 9 个选项卡，等等。基本上，当您单击第二个标记时，第一个标记窗口需要关闭，第二个标记需要打开，仅显示该标记的 3 个选项卡，而不是先前打开的标记的所有其他选项卡。我希望这一点很清楚。这是整个页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Activities</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"></script>    
<script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"></script>
<style type="text/css">
html, body { height: 100%; } 
    .style1
    {
        width: 758px;
    }
    .style2
    {        
        width: 349px;
    }
#side_bar  
{
    height: 550px;
    width: 349px;   
    overflow:scroll;
}
</style>
    <script type="text/javascript">
    //<![CDATA[
        // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = "";
        var gmarkers = [];
        var gicons = [];
        var map = null;

         var InfoBubble = new InfoBubble({
            maxWidth: 300
        });


//defines icon if there is none stated
  gicons["red"] = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",        
      new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.
        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.

  var iconImage = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
        new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',        
      new google.maps.Size(37, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes 
        //the poly by connecting to the first coordinate.
        var iconShape = {
            coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
            type: 'poly'
        };

//determines icon based on category
        //if no icon is defined
        function getMarkerImage(iconColor) {
            if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
                iconColor = "red";
            }
            if (!gicons[iconColor]) {
                gicons[iconColor] = new google.maps.MarkerImage(iconColor,
      new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
            }
            return gicons[iconColor];
        }

        function category2icon(category) {
            var color = "red";
            switch (category) {
                case "Hike": color = "GoogleMaps/Images/HikingIcon.jpg";
                    break;
                case "Camping": color = "GoogleMaps/Images/camping.gif";
                    break;
                case "StatePark": color = "GoogleMaps/Images/statepark.jpg";
                    break;
                case "NationalPark": color = "GoogleMaps/Images/NationalPark_icon.png";
                    break;
                case "PointsofInterest": color = "GoogleMaps/Images/POI.png";
                    break;
                default: color = "red";
                    break;
            }
            return color;
        }

        gicons["Hike"] = getMarkerImage(category2icon("Hike"));
        gicons["Camping"] = getMarkerImage(category2icon("Camping"));
        gicons["StatePark"] = getMarkerImage(category2icon("StatePark"));
        gicons["NationalPark"] = getMarkerImage(category2icon("NationalPark"));
        gicons["PointsofInterest"] = getMarkerImage(category2icon("PointsofInterest"));

// A function to create the marker and set up the event window
        function createMarker(latlng, name, tab1, tab2, tab3, category) {
            var contentString = tab1;
            var contentString2 = tab2;
            var contentString3 = tab3;
            var marker = new google.maps.Marker({
                position: latlng,
                icon: gicons[category],
                shadow: iconShadow,
                map: map,
                title: name,
                zIndex: Math.round(latlng.lat() * -100000) << 5
            });
            // === Store the category and name info as a marker properties ===
            marker.mycategory = category;
            marker.myname = name;
            gmarkers.push(marker);

// to open the info bubbles
            google.maps.event.addListener(marker, 'click', function () {
                InfoBubble.open(map, marker);
                InfoBubble.addTab('Details', contentString);
                InfoBubble.addTab('Notes', contentString2);
                InfoBubble.addTab('Campground Map', contentString3);
            });
        }

        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(category) {
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].mycategory == category) {
                    gmarkers[i].setVisible(true);
                }
            }
            // == check the checkbox ==
            document.getElementById(category + "box").checked = true;
        }

        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(category) {
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].mycategory == category) {
                    gmarkers[i].setVisible(false);
                }
            }
            // == clear the checkbox ==
            document.getElementById(category + "box").checked = false;
            // == close the info window, in case its open on a marker that we just hid
            InfoBubble.close();
        }

        // == a checkbox has been clicked ==
        function boxclick(box, category) {
            if (box.checked) {
                show(category);
            } else {
                hide(category);
            }
            // == rebuild the side bar
            makeSidebar();
        }

        function myclick(i) {
            google.maps.event.trigger(gmarkers[i], "click");
        }

        // == rebuilds the sidebar to match the markers currently displayed ==
        function makeSidebar() {
            var html = "";
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].getVisible()) {
                    html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
                }
            }
            document.getElementById("side_bar").innerHTML = html;
        }

        function initialize() {
            var myOptions = {
                zoom: 8,
                center: new google.maps.LatLng(39.364032, -77.182159),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);

// Closes any open bubbles before opening new one
            google.maps.event.addListener(map, 'click', function () {                
                InfoBubble.close();                
            });

//Downloads the data from xml file
            // Reads the data the creates each tab
            downloadUrl("GoogleMaps/categories.xml", function (doc) {
                var xml = xmlParse(doc);
                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(markers[i].getAttribute("lat"));
                    var lng = parseFloat(markers[i].getAttribute("lng"));
                    var point = new google.maps.LatLng(lat, lng);
                    var address = markers[i].getAttribute("address");
                    var city = markers[i].getAttribute("city");
                    var state = markers[i].getAttribute("state");
                    var zip = markers[i].getAttribute("zip");
                    var name = markers[i].getAttribute("name");
                    var notes = markers[i].getAttribute("notes");
                    var url = markers[i].getAttribute("url");
                    var image = markers[i].getAttribute("image");
                    var tab1 = "";
                    tab1 += "<b>" + name + "<\/b><p>";
                    tab1 += address + "</br>";
                    tab1 += city + ", " + state + " " + zip + "</br>";
                    tab1 += '<br><src="_blank" href="'+url+'">'+url+'</a>' + "</br>";                    
                    var tab2 = notes;
                    var tab3 = "";
                    tab3 += '<img src="'+image+'">' + "</br>"; 
                    tab3 += "Or online at:";
                    tab3 += '<br><a target="_blank" href="'+image+'">'+image+'</a>' + "</br>"; 
                    var category = markers[i].getAttribute("category");
                    // create the marker
                    var marker = createMarker(point, name, tab1, tab2, tab3, category);
                }

                // == show or hide the categories initially ==
                show("Hike");
                hide("Camping");
                hide("StatePark");
                hide("NationalPark");
                hide("PointsofInterest");
                // == create the initial sidebar ==
                makeSidebar();
            });
        }


    //]]>
    </script>
  </head>
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <table border="1" >
      <tr>
        <td class="style1">
           <div id="map" style="width:978px; height: 596px"></div>
        </td>
        <td valign="top" style="text-decoration: underline; color: #4444ff;" 
              class="style2"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
    <form action="#">
      Hiking: <input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" /> &nbsp;&nbsp;
      Camping: <input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" /> &nbsp;&nbsp;
      State Parks: <input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" />&nbsp;&nbsp;
      National Parks: <input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" />&nbsp;&nbsp;      
      Points of Interest: <input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" /> &nbsp;&nbsp;
      <br />
    </form>  




    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
  </body>

</html>

最佳答案

要么删除所有选项卡(如果存在)，要么销毁信息气泡并创建一个新选项卡。

Proof of concept - delete/recreate infoBubble

// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
  if (infoBubble.getMap() != null) {
    infoBubble.close()
    delete infoBubble;
    infoBubble = new InfoBubble({
       maxWidth: 300
    });
  }
  infoBubble.open(map, marker);
  infoBubble.addTab('Details', contentString);
  infoBubble.addTab('Notes', contentString2);
  infoBubble.addTab('Campground Map', contentString3);
});

proof of concept - remove tabs

// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
  infoBubble.open(map, marker);
  infoBubble.removeTab(2);
  infoBubble.removeTab(1);
  infoBubble.removeTab(0);
  infoBubble.addTab('Details', contentString);
  infoBubble.addTab('Notes', contentString2);
  infoBubble.addTab('Campground Map', contentString3);
});

关于javascript - 单击新标记时，Infobubble 选项卡不会重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17661778/

文章推荐： html - 根据另一个元素自动调整元素高度

文章推荐： c++ - 寻找 HSV 转换视频提要的均值

文章推荐： javascript - Canvas html 标签

docker-compose down 不会.. "down"容器
我有几个系统使用 docker-compose 并且没有问题。但是，我在这里有一个“向下”根本不做任何事情的地方。 'up'虽然完美。这是在 MacOS 上。该项目的昵称是“ Storm ”，脚本
PHP 不会 str_replace 数据库中的单引号
解释起来确实很奇怪，所以就这样...... 我正在从 phpmyadmin 获取包含未转义单引号的数据。我正在尝试转换'至'通过使用Content-Type: text/html;在 php
ios - Tableview 不会 reloadData()
伙计们？在这里需要一些帮助。我使用委托(delegate)协议(protocol)将一些字符串从“第二个 View Controller ”传回给它的前一个。我的数组附加了我在委托(delegate
Python 不会 eval() 代码
我有以下 eval() 东西: c = Customer() eval("c.name = row.value('customer', '{c}')".format(c=column_name), {
java - WebApplicationContext 不会 Autowiring
我写了这个测试类: @ContextConfiguration(locations = { "classpath:/test/BeanConfig.xml" }) public class Candi
java - FilterChainProxy 不会 Autowiring
我这样写代码: @ContextConfiguration(locations = { "classpath:/test/BeanConfig.xml" }) @RunWith(SpringJUnit
由于更改了文件，Git 不会 pull
假设我更改了文件，然后进行 pull 。 Git 会报错，因为本地仓库还没有保存，将被覆盖。如果我然后删除该添加并使文件与以前相同(与远程 repo 相同)，那么会发生 pull 吗？最佳答案是的
面试官：不会“不定高”虚拟列表，你在简历上面提他干嘛？
前言很多同学将虚拟列表当做亮点写在简历上面，但是却不知道如何手写，那么这个就不是加分项而是减分项了。在上一篇文章欧阳教会你如何实现一个定高虚拟列表，但是实际项目中更多的是不定高虚拟列表，这篇文
java - 为什么 Eclipse 不会@Override？
我正在阅读《Java for Dummies》一书，但遇到了问题。我不明白为什么 @Override 不起作用。我确信这与我的代码有关，因为我之前已经获得了一个多态数组来使用覆盖，但它对我来说太简单了
wpf - StopStoryboard 不会...停止 BeginStoryboard
我从我的项目中提取了这段代码，因为我试图找到我犯的一个错误，该错误使我的 BeginStoryboard 无法自行停止。我尽可能地简化了代码，但仍然没有发现问题。你认为它可能是什么？
char* 会导致段错误，但 char[] 不会
这个问题在这里已经有了答案: Difference between char[] and char * in C [duplicate] (3 个答案) 关闭 7 年前。我想我知道自己问题的答案，
Java Scanner 不会 "finish"读取输入
我一直在使用 java 的 Scanner 类时遇到问题。我可以让它很好地读取我的输入，但问题是当我想要输出一些东西时。给定多行输入，我想在完全读取所有输入后只打印一行。这是我用来读取输入的代码:
如果再次单击，javascript 不会 .toggleClass() 吗？
对于这个问题，我已经用最简单的术语表达了这一点。如果元素被点击，'active'类被添加到元素，'active'类从其他元素中移除。但是，如果该元素是“事件的”并且它被第二次单击，则“事件”类不应
c++ - SHFileOperation 不会 move 文件夹的所有内容
这会在桌面上创建一个新文件夹，但不会将文件夹 .pfrom 的内容 move 到文件夹 .pTo。 int main() { SHFILEOPSTRUCT sf = {0}; TCHA
c++ -/MTd 会触发断点但/MDd 不会
我有一个关于多线程调试 DLL (/MDd) 和多线程调试 (/MTd) 设置的问题。它们之间的区别很明显:一个是使用动态库，一个是使用静态库。当我使用/MDd 编译我的程序时，一切都进行得很好。但是
javascript - jQuery 不会 append 在文档就绪时声明的克隆
我的问题是，如果我在页面加载时创建一个克隆变量，jQuery 只会 append 它一次。奇怪! Click to copy This is an element! $(document)
python - heroku postgresql 不会 syncdb
所以...我是一个开发 django 应用程序的新手，但是当我尝试通过 virtualbox heroku 运行 heroku run python manage.py syncdb 时，它一直在下面
java - SpringBootApplication 不会 Autowiring 我的服务
我在 Spring Boot 初始化时遇到了问题。我在一个简单的 Spring Boot 项目中有这个结构。 com.project.name |----App.java (Annoted with
css - div 不会 float ，任何人都可以看到为什么吗？
我在 www.7hermanosmx.com/menu.php 页面上有以下代码 - 一切正常，除了黄色框(类 menuholder)应该每行三个相互 float 。他们坚决拒绝这样做!我知道我做错了
javascript - 单击时我的 div 不会 slideDown()。
我正在尝试在我正在构建的小型网站上添加一个下拉菜单。出于某种原因，我可以获得我想要向下滑动到 fadeOut() 的 div 并执行其他类似的操作，但我无法将它获取到 slideDown()。我不知道

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击新标记时，Infobubble 选项卡不会重置