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 回答