javascript - 标记未显示在我的 map 上

Question

我正在尝试根据数据库中的事件添加标记，如果事件发生在同一位置，则为该新事件向 infoBubble 添加一个选项卡。我似乎无法弄清楚为什么标记(和我的 infoBubbles)没有显示在我的 map 上。

这是我的代码:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpQfirqx48owNbdu6ZF01pTr3Lt-tjYQI&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript">

 var location_icon = new google.maps.MarkerImage('../images/FAFSA_Logo_icon.png');  
 var map;
 var markersArray= [];
 var infobubblesArray = [];
  function load() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(33.961586, -106.008728),
        zoom: 6,
        mapTypeId: 'roadmap'
    });



    downloadUrl("../site_parts/mapmysql.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("event_name");
        var address = markers[i].getAttribute("venue_address");
        var city = markers[i].getAttribute("venue_city");
        var state = markers[i].getAttribute("venue_state");
        var zip = markers[i].getAttribute("venue_zip");
        var website = markers[i].getAttribute("venue_website");

        var date = markers[i].getAttribute("event_date");
        var start_time = markers[i].getAttribute("event_start_time");
        var end_time = markers[i].getAttribute("event_end_time");
        var room = markers[i].getAttribute("event_room");
        var cord = markers[i].getAttribute("ec_fname") + " " + markers[i].getAttribute("ec_lname");
        var cord_email = markers[i].getAttribute("ec_email");
        var cord_pnumber = markers[i].getAttribute("ec_pnumber");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("venue_lat")),
            parseFloat(markers[i].getAttribute("venue_lng")));
        var html = "<b>" + name + "</b> <br/>" + address +", "+ city +", "+ state +", "+ zip + "<br/>" +"<b>Date </b> "+ date +"<br/>" +"<b>Time </b> "+ start_time + " - "+ end_time +"<br/>" + "<b>Room </b>" + room + "<br/>"+ "<b> Cordinator </b>" + cord + " " + "<a href='mailto:" + cord_email + "?Subject=FAFSA%20FFA%20Event'>" + cord_email + "</a> " + cord_pnumber;
        var icon =  location_icon;

            for (var x = 0; x < markersArray.length; x++){
                if (markersArray[x].getPosition() == point){
                    infobubblesArray[x].addTab(date, html);
                    break;
                }  
                if (x < (markersArray.length -1)){continue} else{
                    var newM = x+1;
                    markersArray[newM] = new google.maps.Marker({map: map, position: point, icon: icon});
                    infobubbleArray[newM] = new InfoBubble({maxWidth: 400, borderWidth: 2});
                    bindinfoBubble(markersArray[newM], map, infobubblesArray[newM])
                    infobubblesArray[newM].addTab(date, html);
                  }
            }  
        }
    });
  }

function bindinfoBubble(marker, map, infoBubble) {
  google.maps.event.addListener(marker, 'click', function() {

    infoBubble.open(map, marker);


  });
}

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {} 

</script>

XML

<markers>
<marker event_name="Atrisco Heritage Academy" venue_address="10800 Dennis Chavez             Boulevard" venue_city="Albuquerque" venue_state="New Mexico" venue_zip="87121"         venue_website="http://ahahighschool.com" venue_lat="35.022449" venue_lng="-106.748777"             event_date="2013-01-17" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Bernalillo High School" venue_address="250 Isidro Sanchez Rd" venue_city="Bernalillo" venue_state="New Mexico" venue_zip="87004" venue_website="http://www.bernalillo.bps.k12.nm.us/education/school/school.php?sectionid=3" venue_lat="35.321560" venue_lng="-106.541828" event_date="2013-01-22" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Bernalillo High School" venue_address="250 Isidro Sanchez Rd" venue_city="Bernalillo" venue_state="New Mexico" venue_zip="87004" venue_website="http://www.bernalillo.bps.k12.nm.us/education/school/school.php?sectionid=3" venue_lat="35.321560" venue_lng="-106.541828" event_date="2013-01-23" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Cibola High School" venue_address="1510 Ellison Drive" venue_city="Albuquerque" venue_state="New Mexico" venue_zip="87114" venue_website="http://www.cibolacougars.com" venue_lat="35.205190" venue_lng="-106.663214" event_date="2013-01-23" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Rio Rancho High School" venue_address="301 Loma Colorado N.E." venue_city="Rio Rancho" venue_state="New Mexico" venue_zip="87124" venue_website="http://rioranchohigh.rrps.net/" venue_lat="35.272536" venue_lng="-106.678116" event_date="2013-01-30" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Farmington high School" venue_address="2200 Sunset Ave." venue_city="Farmington" venue_state="New Mexico" venue_zip="87401" venue_website="http://fhs.fms.k12.nm.us/" venue_lat="36.749957" venue_lng="-108.204563" event_date="2013-02-04" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="Cimarron High School" venue_address="165 North Collison Avenue" venue_city="Cimarron" venue_state="NM" venue_zip="87714" venue_website="http://www.chsrams.org/" venue_lat="36.512275" venue_lng="-104.920166" event_date="2013-02-04" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
<marker event_name="West Mesa High School" venue_address="6701 Fortuna Road NW" venue_city="Albuquerque" venue_state="New Mexico" venue_zip="87121" venue_website="http://www.westmesamustangs.com" venue_lat="35.095882" venue_lng="-106.716171" event_date="2013-02-05" event_start_time="0" event_end_time="0" event_room="TBD" ec_fname="TBD" ec_lname="" ec_email="" ec_pnumber=""/>
</markers>

Answer 1

有不同的问题，大部分都是 for (var x = 0; x < markersArray.length; x++)

您在此循环内创建标记，但最初 markersArray 为空，您将永远不会运行此循环。还有一个错字，infobubbleArray应该是 infobubble<b>s</b>Array

固定代码:

downloadUrl("../site_parts/mapmysql.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    outer: for (var i = 0; i < markers.length; i++) {

           /* creation of the variables may stay here as it is */

            for (var x = 0; x < markersArray.length; x++){
                if (markersArray[x].getPosition().toString() == point.toString()){
                    infobubblesArray[x].addTab(date, html);                         
                    continue outer;
                }}

                var newM = markersArray.length;
                    markersArray[newM] = new google.maps.Marker({map: map, position: point});
                    infobubblesArray[newM] = new InfoBubble({maxWidth: 400, borderWidth: 2});
                    bindinfoBubble(markersArray[newM], map, infobubblesArray[newM])
                    infobubblesArray[newM].addTab(date, html);
        }
    });