0

XML ファイル内の都市名と国名を使用して、自分のページの Google マップにマーカーを実装しようとしています。残念ながら、国オブジェクトを保持するグローバル配列 (countryList) を取得できず、XML パーサーの外部に移入されないようです。パーサー内でアラートを使用すると、35 個のアイテムが保持されていることがわかりますが、外側には 0 個あります。洞察を探していますが、これらの関数がロードされる順序に関係していると考えています. 配列がアイテムを保持していないため、マップ マーカーに入力する都市がありません。

<script type="text/javascript">


$(document).ready(function() {
    $.ajax({
      type: "GET",
      url: "countries.xml",
      dataType: "xml",
      success: parseXML
    });  
});
var countryList = [];
    function parseXML(xml) {
        $(xml).find("country").each(function() {
            var name = $(this).find("name").text();
            var capital = $(this).find("capital").text();


            countryList.push(new CountryObject(name, capital));

        });
        //alert(countryList.length);        this shows a count of 35`enter code here`
}

//alert(countryList.length);    this shows a count of 0

function CountryObject(name, capital) {
    this.name = name;
    this.capital = capital; 
}


var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

//plot initial point using geocode instead of coordinates (works just fine)
function initialize() {

    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds ();

    var myOptions = {
        zoom: 4, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder.geocode( { 'address': 'Toronto Canada'}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    plotMarkers();
}

var locationsArray = [];

for (var j = 0; j < countryList.Length; j++) {
    var loc = countryList[j].capital + ' ' + countryList[j].name;
        locationsArray[j] = [countryList[j].capital, loc];
}


function plotMarkers(){
    var i;
    for(i = 0; i < locationsArray.length; i++){
        codeAddresses(locationsArray[i]);
    }
}

function codeAddresses(address){
    geocoder.geocode( { 'address': address[1]}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(address[0]);
                infowindow.open(map, this);
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker); 
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }

        map.fitBounds(bounds);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body onload="initialize()">

編集：countryList配列で収集された情報を使用して、locationsArrayを使用してマーカーを設定しようとしています（オンラインの例の大部分が使用する値をハードコーディングするのではなく）。ただし、countryList にデータを入力し続けるために何が欠けているのかよくわかりません。また、SO で見つけたもの以外に、同期と非同期についてあまり詳しくありません。

4

1 に答える 1