我试图刷新我在地图上的标记。为此,我尝试将标记推送到数组中。谷歌地图继续添加标记,但不删除旧标记。数组是否正确实现?我的代码有什么问题?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xyzs&sensor=true">
</script>
<script type="text/javascript">
var map;
var markersArray = [];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(48.137, 11.577),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
setInterval(function() {
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
$(document).ready(function() {
$.getJSON('./url.php', function(data) {
var cars = data.rec.vehicles.vehicles;
$.each(cars, function(key, data) {
var LatLng = new google.maps.LatLng(data.position.latitude, data.position.longitude);
var imageh = data.model;
var bild = "/" + imageh + ".png";
if(data.fuelState <=25)
{bild="/EMPTY.png";}
var bild1= "/" + imageh + "1.png";
var tanken1="";
if(data.fuelState<=25){tanken1="TANKEN";}
var drive="Manuell";
if(data.auto=="Y"){drive="Automatik";}
var kosten="31 Cent/Minute"
if(data.model=="BMW 1er Cabrio"){kosten="34 Cent/Minute"}
if(data.model=="MINI Cabrio"){kosten="34 Cent/Minute"}
if(data.model=="BMW X1 "){kosten="34 Cent/Minute"}
console.log(bild);
console.log(data.auto);
console.log(drive);
console.log(kosten);
console.log(markersArray);
var contentString ='<h1>'+data.model+" "+data.carName+'</h1><IMG BORDER="0" ALIGN="center" SRC="' + data.model + '1.png"><br><br>Kennzeichen: '+ data.licensePlate +'<br>Fahrgestellnummer: '+data.vin+'<br>Getriebe: '+drive+'<br>Fuellstand: ' + data.fuelState + '% <IMG BORDER="0" ALIGN="absmiddle" SRC="' + data.fuelState + '.png"><br>Zustand: <IMG BORDER="0" align="absmiddle" SRC="' + data.innerCleanliness + '.png"><br>Adresse: ' +data.address+'<br>Kosten: '+kosten+'<br><a href="https://de.drive-now.com/php/metropolis/vehicle_details?vin='+ data.vin +'">Dieses Fahrzeug jetzt Buchen!</a><br><br><IMG BORDER="0" ALIGN="center" SRC="/dnlogo.jpg">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: LatLng,
title: data.model,
icon: bild
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
google.maps.event.addListener(map, 'click', function() {if(infowindow){infowindow.close();}});
});
marker.setMap(map);
});
});
});
}, 2000);
$(document).ready(function() {
$.getJSON('./PetrolStations.txt', function(data) {
$.each(data, function(key, data) {
var LatLng = new google.maps.LatLng(data.lat, data.lng);
var bild1 = "/PETROL.png";
var contentString1 = data.name;
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var marker = new google.maps.Marker({
position: LatLng,
title: data.lng,
icon: bild1
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
google.maps.event.addListener(map, 'click', function() {if(infowindow){infowindow.close();}});
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>