我写了以下代码。代码中的值a和b是纬度和经度值,它们由正在运行的python代码定期更新。但是,尽管a和b的值发生了变化,但标记似乎并不像预期的那样每3秒刷新一次。
<html>
<head>
<title>Tracking</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#map-canvas
{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="map-canvas"></div>
<script>
var a;
var b;
a=17.429385;b=78.4451901667;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: new google.maps.LatLng(a,b),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function initialize() {
var map = map;
}
function loadMarker(a,b) {
latlng=new google.maps.LatLng(a,b);
new google.maps.Marker({position: latlng, map: map});
}
$(document).ready(
function() {
setInterval(function() {
a=17.429385;b=78.4451901667;
latlng=new google.maps.LatLng(a,b);
marker=new google.maps.Marker({position: latlng, map: map});
marker.setMap( map );
marker.setPosition( new google.maps.LatLng( a, b) );
map.panTo( new google.maps.LatLng( a, b) );
}, 3000);
});
initialize();
loadMarker(a,b);
</script>
</body>
</html>
答案 0 :(得分:1)
试试这个
<html>
<head>
<title>Tracking</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#map-canvas
{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="map-canvas"></div>
<script>
var a, b, varInterval, marker = [];
var markersPlacement = 0;
var locations = [];
locations.push(17.429385 + ',' + 78.4451901667);
locations.push(41.8369 + ',' + 87.6847); //Chicago
locations.push(36.1215 + ',' + 115.1739); //LA
var defaultLocation = locations[markersPlacement].split(',');
var mapIcon = 'http://images.clipartpanda.com/google-location-icon-location-map-512.png';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
center: new google.maps.LatLng(parseFloat(defaultLocation[0]), parseFloat(defaultLocation[1])),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function deleteMarkers() {
clearMarkers();
marker = [];
}
function clearMarkers() {
setMapOnAll(null);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
function addMarker(location) {
var mark = new google.maps.Marker({
position: location,
map: map,
icon: mapIcon,
});
marker.push(mark);
}
$(document).ready(
function () {
varInterval = setInterval(function () {
console.log(markersPlacement);
console.log(locations.length);
if (locations.length >= markersPlacement) {
deleteMarkers();
//REMOVE THE BELOW AND ADD THE AJAX CODE BELOW HERE.
defaultLocation = locations[markersPlacement].split(',');
addMarker(new google.maps.LatLng(parseFloat(defaultLocation[0]), parseFloat(defaultLocation[1])));
markersPlacement++;
} else {
clearInterval(varInterval);
}
}, 5000);
});
</script>
</body>
</html>
&#13;
现在,您必须确保在运行setInterval时更新a和b的值。
// response would be something like
// {"location":{"lat":41.881832,"lng":-87.623177}}
$.ajax({
cache: false,
url: "/path/to.json",
dataType: "json",
success: function(response) {
addMarker(new google.maps.LatLng(parseFloat(response.location.lat), parseFloat(response.location.lng)));
}
});