0

如何在创建标记时显示它们？目前，它们被添加到数组中并一次显示。

感谢您的帮助......以及任何编码改进建议。

<!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>
<title>Maps</title>
<style type="text/css"> 
html, body { height: 100%; } 
</style>
</head>
<body onload="initialize()">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">
        var side_bar_html = ""; 
        var map = null;
        var markers = [];
        var sites = [['Action Family Counseling Alcohol & Drug Treatment', 34.2807649, -118.7094014, 1, 'Action Family Counseling Alcohol & Drug Treatment<br>4380 Apricot Road<br>Simi Valley, CA  93063', 'Company'],['AIM - Access for Infants and Mothers', 34.217982, -119.147809, 21, 'AIM - Access for Infants and Mothers<br>2220 East Gonzales Road<br>Oxnard, CA  93036', 'Company'],['Ananda Marga Universal Relief Team', 39.086355, -77.1889489, 111, 'Ananda Marga Universal Relief Team<br>2502 Lindley TER <br>Rockville, MD  20805', 'Company'],['Area Agency on Aging', 34.2698398, -119.2148903, 9, 'Area Agency on Aging<br>646 County Square Dr.<br>Ventura, CA  93003', 'Company'],['Area Christians Taking Initiative On Needs (ACTION', 34.2087312, -119.0315009, 2, 'Area Christians Taking Initiative On Needs (ACTION<br>406 Constitution Avenue<br>Camarillo, CA  93012', 'Company'],['Berylwood Family Resource Center', 34.2684132, -118.7516168, 3, 'Berylwood Family Resource Center<br>2300 Heywood Street<br>Simi Valley, CA  93065', 'Company'],['Big Brothers/Big Sisters of Ventura County', 34.220567, -119.062037, 5, 'Big Brothers/Big Sisters of Ventura County<br>445 Rosewood Avenue<br>Camarillo, CA  93010', 'Company'],['Boys and Girls Club of Camarillo ', 34.2293953, -119.0307973, 8, 'Boys and Girls Club of Camarillo <br>1500 Temple Ave. <br>Camarillo, CA  93010', 'Company'],['Boys and Girls Club of Moorpark', 34.288225, -118.884874, 6, 'Boys and Girls Club of Moorpark<br>200 Casey Road<br>Moorpark, CA  93021', 'Company']];
        var x = 121;
        var infowindow = new google.maps.InfoWindow({ 
            size: new google.maps.Size(150, 50)
        });
        var pinImage = [];
        var i = 0;
        var html = '';
        // company is green
        // lodging is red
        pinImage["Company"] = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|00AF33", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));;
        pinImage["Lodging"] = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=L|FE7569", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));;
        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35)
        );

        function initialize() {
            var centerMap = new google.maps.LatLng(39.828175, -98.5795);
            var myOptions = {
                zoom: 4,
                center: centerMap,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });
            displayMarkers();
            show("Company");
            hide("Lodging");
            makeSidebar();
        }

        function displayMarkers() {
            var siteLatLng = new google.maps.LatLng(sites[i][1], sites[i][2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[i][0],
                zIndex: sites[i][3],
                html: sites[i][4],
                icon: pinImage[sites[i][5]],
                shadow: pinShadow
            });
            marker.mycategory = sites[i][5];
            marker.myname = sites[i][0];
            markers.setVisible = true;
            markers.push(marker);
            markers[i].setVisible(true);
            var contentString = "Some content";
            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
            html += '<a href="javascript:myclick(' + i + ')">' + markers[i].myname + '<\/a><br>';
            document.getElementById("side_bar").innerHTML = html;
            i++
            if (i < sites.length) {
                document.getElementById('counter').innerHTML = 'Loading record ' + i + ' of ' + sites.length;
                setTimeout("displayMarkers()", 10);
            }
            else {
                document.getElementById('counter').innerHTML = 'Check/Uncheck boxes for Markers to display.';
            }
        }

        function show(category) {
            for (var i=0; i < markers.length; i++) {
                if (markers[i].mycategory == category) {
                    markers[i].setVisible(true);
                }
            }
            document.getElementById(category+"box").checked = true;
        }

        function hide(category) {
            for (var i=0; i < markers.length; i++) {
                if (markers[i].mycategory == category) {
                    markers[i].setVisible(false);
                }
            }
            document.getElementById(category+"box").checked = false;
            infowindow.close();
        }

        function boxclick(box,category) {
            if (box.checked) {
                show(category);
            }
            else {
                hide(category);
            }
            makeSidebar();
        }

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

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

    <form action="#">
        <table>
            <tr>
                <td>
                <p align="center">
                <img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|00AF33">
                <br />
                <strong>Company:</strong>
                <input type="checkbox" id="Companybox" onclick="boxclick(this,'Company')" /><br>121 Records</p>
                </td>
                <td>
                <p align="center">
                <img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=L|FE7569">
                <br />
                <strong>Lodging:</strong>
                <input type="checkbox" id="Lodgingbox" onclick="boxclick(this,'Lodging')" /><br>121 Records</p>
                </td>
            </tr>
        </table>
    </form>
    <div id="counter"></div>
    <table border="1" cellspacing="5" cellpadding="5" bgcolor="#990000" height="500">
        <tr>
            <td bordercolor="#000000" bgcolor="#000000" valign="top">
            <div class="notscrollable" id="map_canvas" style="width: 625px; height: 500px">
            </div>
            </td>
            <td valign="top" bgcolor="#EBEBEB" bordercolor="#000000">
            <div style="font-size:13px">
                <div class="scrollable" id="side_bar" style="height: 500px; overflow: scroll">
                </div>
            </div>
            </td>
        </tr>
    </table>



<body>
</html>
4

1 回答 1

0

发现了问题。

从一开始就删除了 var map 并移动了一些东西。

于 2012-12-14T00:51:07.020 回答