我正在尝试更新标记的位置,而不刷新整个页面。我尝试使用,setTimeout(function()但是我没有运气。
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);
这是我的JSON输出。
[{"lat":35.6606376,"lng":-80.5048653,"content":"bca"}, {"lat":42.6799504,"lng":-36.4949205,"content":"abc"}]
我建议使用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);