單擊新標記時不會重置Infobubble選項卡

我正在使用api V3的infobubble選項卡。第一個標記一切正常，3個標籤顯示正確的數據。然後點擊另一個標記，第一個標記選項卡將顯示數據以及新標記3個選項卡，所以當您單擊第二個標記時，最終將顯示6個選項卡。當您單擊第三個標記時，窗口關閉，然後出現新標記infobubble，其中前6個標籤，然後是該標記的新3個標籤，這樣您最終將得到9個標籤，並且每次新點擊都會結束。基本上，當你點擊第二個標記時，第一個標記窗口需要關閉，第二個標記需要打開，只有該標記的3個標籤，而不是以前打開的標記的所有其他標籤。我希望這很清楚。這裏是整個網頁代碼：單擊新標記時不會重置Infobubble選項卡

<!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>

來源

2013-07-15 2pourdrummer

要麼去除所有標籤，如果它們存在或銷燬infobubble，並創建一個新的。

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

來源

2013-07-15 19:22:52 geocodezip

我試圖刪除與infobubble.removetab的標籤，但它沒有工作，我是新來的JavaScript，將代碼是什麼呢？謝謝你的幫助。 – 2pourdrummer

查看一個工作示例的概念證明（需要進行其他更改） – geocodezip

這樣做。非常感謝，我知道它必須是removetab，但無法弄清楚。 – 2pourdrummer

單擊新標記時不會重置Infobubble選項卡

回答

相關問題