单击新标记时,Infobubble标签不会重置

时间:2013-07-15 18:57:06

标签: javascript google-maps infobubble

我正在使用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>

1 个答案:

答案 0 :(得分:1)

删除所有标签(如果存在)或销毁信息按钮并创建一个新标签。

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