jquery gMap with lots of dynamic locations

问题

Ok, so I'm using gmap to display many locatons from an xml file that stores the city, state, html, and other information about certain locations.Problem here is there are most likely over 100 locations.

Inside NEW my ajax Call:

    var myMarkers = new Array;
$(xml).find("location").each(function(){
    var locAddress = $(this).find("city").text() + "," + $(this).find("state").text() ;
    var cc = $(this).find("cc").text();
    var bcc; 
    if ($(this).find("bcc")){ 
            bcc = $(this).find("bcc").text();
        }else{
            bcc = " - ";
        }
    var vendor =$(this).find("vendor").text();
    var hours = $(this).find("hours").text();
    var HTMLString =  "<div class=\"map-balloon\"><h3>" + locAddress + "</h3>Vendor: " + vendor + "<br />CC#: " + cc + "<br />Bulk CC#: " + bcc + "<br />Hours: " + hours + "</div>" ;

    myMarkers.push("{ address: \"" + locAddress + "\", html: \"" + HTMLString + "\"}");

});

$("#map").gMap({ markers: [myMarkers.toString()], address: "United States", zoom: 4 }); // shows the correct zoom and region, but markers do not display now.
console.log(myMarkers.toString());//Shows the correct string we want

Problem with this is it loads each time, firefox hates it and go figure, it works in IE7.

My question is, what is the best way to dynamically set multiple markers? HERE IS THE NEW WORKING CODE:

var myMarkers = new Array;  

    $.ajax({
    url: "tire-banks.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    async: false,
    success: function(data){
                    var xml;    
                    if (typeof data == "string") {
                       xml = new ActiveXObject("Microsoft.XMLDOM");
                      // xml.async = false;
                       xml.loadXML(data);
                    } else {
                       xml = data;
                    }

                    $(xml).find("location").each(function(){
                        var locAddress = $(this).find("city").text() + "," + $(this).find("state").text() ;
                        var cc = $(this).find("cc").text();
                        var bcc; 
                        if ($(this).find("bcc")){ 
                            bcc = $(this).find("bcc").text();
                            }else{
                            bcc = " - ";
                            }
                        var vendor =$(this).find("vendor").text();
                        var hours = $(this).find("hours").text();
                        var HTMLString =  "<div><h3>" + locAddress + "</h3>Vendor: " + vendor + "<br />CC#: " + cc + "<br />Bulk CC#: " + bcc + "<br />Hours: " + hours + "</div>" ;

                        myMarkers.push({ address: locAddress, html: HTMLString});   
                    });

回答1:

I think you should try to create the JSON objects like you do and once done create every markers at the same time. (I'm not certain if it's a String you should use, but you got the idea).

// With something like :
var myMarkers = "";
// 'Each' loop {
 myMarkers += "{ address: "+locAddress+", html: "+HTMLString+"},";
// End 'Each' loop }
// Don't forget to remove the trailing ','
 $("#map").gMap({ markers: [myMarkers] });

来源：https://stackoverflow.com/questions/6344599/jquery-gmap-with-lots-of-dynamic-locations

标签

jquery

jquery-gmap