1

私はグーグルマップv3を使用しています。json ファイルからの情報を使用して、いくつかのマーカーを作成しました。ルートラインを地図に表示しようとしていますが、うまくいきません。その理由がわかりません。

ここに私のjQueryコードがあります:

var positions = [];
var map;

$(function () {
    map = initializeMap();
    loadMarkers();
    var flightPath = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
});

function initializeMap() {
    var myOptions = {
        center: new google.maps.LatLng(41.376809, -37.441406),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

    return map;

};

function loadMarkers() {
    var latlng;
    var marker;
    var image = 'img/praline.png';
    $.getJSON('json/markers.json', function (data) {
        $(data).each(function (index, value) {
            latlng = new google.maps.LatLng(value.x, value.y);
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: value.title,
                icon: image
            });
            positions[value.id - 1] = latlng;

        });

    });


}

そしてここに私のjsonファイル：

[
    {
        "class":"marker",
        "id":1,
        "x":"47.175303",
        "y":"7.064539",
        "title":"Camille Bloch",
        "date":"21/10/2010",
        "details":"<h1>Camille Bloch</h1><h4>Courtelary, CH</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
    },
    {
        "class":"marker",
        "id":2,
        "x":"51.903421",
        "y":"4.483248",
        "title":"Haven Rotterdam",
        "date":"22/10/2010",
        "details":"<h1>Haven Rotterdam</h1><h4>Rotterdam, NL</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
    }
]

前もって感謝します。

4

1 に答える 1

1

AJAX は非同期であるため、次のように getJSON コールバック (LatLngs が実際に作成された後) 内にポリラインを配置する必要があります。それ以外の場合、コードはポリラインに空の位置配列を設定するだけです。

$.getJSON('json/markers.json', function(data) {
    function(data) {

        $(data).each(function(index, value) {
            alert(value.x);
            latlng = new google.maps.LatLng(value.x, value.y);
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: value.title,
                icon: image
            });
            positions[value.id - 1] = latlng;

        });

        var flightPath = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        flightPath.setMap(map);

    });​
}
于 2012-07-08T00:22:56.200 に答える