我正在尝试根据数据库中的事件添加标记，并且在事件发生在同一位置的情况下，为该新事件的infoBubble添加一个选项卡。我似乎无法弄清楚为什么标记（和我的infoBubbles）没有出现在我的地图上。
这是我的代码：
<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>
答案 0 :(得分：2)
存在不同的问题，最重要的是for (var x = 0; x < markersArray.length; x++)
您在此循环中创建标记，但最初markersArray为空，您将永远不会运行此循环。还有一个拼写错误，infobubbleArray应为infobubblesArray
固定代码：
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);
}
});
答案 1 :(得分：0)
我找到了一个似乎有效的解决方案（除了当前标签上方连续开头的标签），这里是检查结果的结束循环：
var x = 0;
while (x < (markersArray.length)){
if (markersArray[x].getPosition().toString() == point.toString()){
infobubblesArray[x].addTab(date, html);
continue xmlLoop; /*to the outside loop for the xml sheet readthrough*/
}x++;
}
var newM = markersArray.length;
markersArray[newM] = new google.maps.Marker({map: map, position: point, icon: icon});
infobubblesArray[newM] = new InfoBubble({maxWidth: 500, minHight: 600, borderRadius: 0});
bindinfoBubble(markersArray[newM], map, infobubblesArray[newM]);
infobubblesArray[newM].addTab(date, html);