Javascript 如何：在谷歌地图上从JSON动态更新标记

我试图在不刷新整个页面的情况下更新标记的位置。我曾尝试使用

setTimeout（function（）

，但我运气不佳

这是我到目前为止的代码

提前谢谢

function initialize() {
    var mapOptions = {
       center: new google.maps.LatLng(35.66, -80.50),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);



 var json = (function () { 
        var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "getjson.php", 
                'dataType': "json", 
                'success': function (data) {
                 json = data; } }); 

            return json;})(); 
for (var i = 0, length = json.length; i < length; i++) {

  var data = json[i],
  latLng = new google.maps.LatLng(data.lat, data.lng); 
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});

}

var infoWindow = new google.maps.InfoWindow();


google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});


(function(marker, data) {


google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});

})(marker, data);



  }

  google.maps.event.addDomListener(window, 'load', initialize);

我认为您不需要重新绘制地图，但如果您这样做：

google.maps.event.trigger(mapObject, 'resize');

---

我建议使用setInterval而不是setTimeout

下面是一些代码，它使用您提供的JSON以及为每个标记添加的所需“description”成员，在中通过JSON模拟更新：

var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () {
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode([{
                "lat": 35.6606376 + (0.01 * intervalNumber),
                    "lng": -80.5048653 + (0.1 * intervalNumber),
                    "content": "bca",
                "description":"first marker"
            }, {
                "lat": 42.6799504 + (0.01 * intervalNumber),
                    "lng": -36.4949205 - (0.1 * intervalNumber),
                    "content": "abc",
                "description": "second marker"
            }]),
            delay: 3
        },
        onSuccess: function (response) {
            update_map(response);
            intervalNumber++;
        }
    }).send();
}, 5000);
update_map = function (data) {
    var bounds = new google.maps.LatLngBounds();

    // delete all existing markers first
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
    }
    gmarkers = [];

    // add new markers from the JSON data
    for (var i = 0, length = data.length; i < length; i++) {
        latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        bounds.extend(latLng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data[i].title
        });
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
            infoWindow.open(map, marker);
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
                infoWindow.open(map, marker);
            });
        })(marker, data[i]);
        gmarkers.push(marker);
    }

    // zoom the map to show all the markers, may not be desirable.
    map.fitBounds(bounds);
};

function initialize() {
    // initialize the map on page load.
    var mapOptions = {
        center: new google.maps.LatLng(35.66, -80.50),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    // add the markers to the map if they have been loaded already.
    if (gmarkers.length > 0) {
        for (var i = 0; i < gmarkers.length; i++) {
            gmarkers[i].setMap(map);
        }
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

var-map=null；
var gmarkers=[]；
var区间数=0；
setInterval（函数（）{
new Request.JSON({
url:“/echo/json/”，
数据：{
json:json.encode([{
“lat”：35.6606376+（0.01*区间数），
“液化天然气”：-80.5048653+（0.1*间隔编号），
“内容”：“bca”，
“说明”：“第一个标记”
}, {
“纬度”：42.6799504+（0.01*区间数），
“液化天然气”：-36.4949205-（0.1*间隔编号），
“内容”：“abc”，
“说明”：“第二个标记”
}]),
延误：3
},
onSuccess:函数（响应）{
更新地图（回应）；
区间数++；
}
}).send（）；
}, 5000);
更新映射=功能（数据）{
var bounds=new google.maps.LatLngBounds（）；
//首先删除所有现有标记
对于（变量i=0；i”+marker.getPosition（）.toUrlValue（6））；
信息窗口。打开（地图、标记）；
});
（功能（标记、数据）{
google.maps.event.addListener（标记“单击”，函数（e）{
infoWindow.setContent（data.description+“
”+marker.getPosition（）.toUrlValue（6））；
信息窗口。打开（地图、标记）；
});
})（标记，数据[i]）；
G标记器。推（标记器）；
}
//缩放地图以显示所有标记，这可能是不可取的。
映射边界（bounds）；
};
函数初始化（）{
//在页面加载时初始化映射。
变量映射选项={
中心：新google.maps.LatLng（35.66，-80.50），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
//如果标记已加载，则将其添加到地图中。
如果（gmarkers.length>0）{
对于（变量i=0；i

尝试过也许我做错了，但它不起作用(

google.maps.event.trigger(mapObject, 'resize');

var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () {
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode([{
                "lat": 35.6606376 + (0.01 * intervalNumber),
                    "lng": -80.5048653 + (0.1 * intervalNumber),
                    "content": "bca",
                "description":"first marker"
            }, {
                "lat": 42.6799504 + (0.01 * intervalNumber),
                    "lng": -36.4949205 - (0.1 * intervalNumber),
                    "content": "abc",
                "description": "second marker"
            }]),
            delay: 3
        },
        onSuccess: function (response) {
            update_map(response);
            intervalNumber++;
        }
    }).send();
}, 5000);
update_map = function (data) {
    var bounds = new google.maps.LatLngBounds();

    // delete all existing markers first
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
    }
    gmarkers = [];

    // add new markers from the JSON data
    for (var i = 0, length = data.length; i < length; i++) {
        latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        bounds.extend(latLng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data[i].title
        });
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
            infoWindow.open(map, marker);
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
                infoWindow.open(map, marker);
            });
        })(marker, data[i]);
        gmarkers.push(marker);
    }

    // zoom the map to show all the markers, may not be desirable.
    map.fitBounds(bounds);
};

function initialize() {
    // initialize the map on page load.
    var mapOptions = {
        center: new google.maps.LatLng(35.66, -80.50),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    // add the markers to the map if they have been loaded already.
    if (gmarkers.length > 0) {
        for (var i = 0; i < gmarkers.length; i++) {
            gmarkers[i].setMap(map);
        }
    }
}

google.maps.event.addDomListener(window, 'load', initialize);