Google使用数组映射标记刷新 [英] Google maps Marker refresh with an Array
本文介绍了Google使用数组映射标记刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：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 = [];
函数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 / javascriptsrc =http://code.jquery.com/jquery-latest.min.js>< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =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 （data.model ==MINI Cabrio）{kosten =34 Cent / Minute}
if（data.model ==BMW 1er Cabrio）{分钟}
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 =0ALIGN =centerSRC ='+ data.model +'1.png>< br>< br> Kennzeichen：'+ data.licensePlate +'< br> Fahrgestellnummer：'+ data.vin +'< br> Getriebe：'+ drive +'< br> ; Fuellstand：'+ data.fuelState +'％< IMG BORDER =0ALIGN =absmiddleSRC ='+ data.fuelState +'.png>< br> Zustand：< IMG BORDER = 0align =absmiddleSRC ='+ data.innerCleanliness +'.png>< br>地址：'+ data.address +'< br> Kosten：'+ kosten +'< br><< br ; a href =https://de.drive-now.com/php/metropolis/vehicle_details?vin='+ data.vin +'> Dieses Fahrzeug jetzt Buchen！< / a>< br><< ; br>< IMG BORDER =0ALIGN =centerSRC =/ 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，'单击'，function（）{if（infowindow）{infowindow.close（）;}}）;
}）;
marker.setMap（map）;
}）;
}）;
}）;
}，2000）;
$ b $（document）.ready（function（）{
$ .getJSON（'./ PetrolStations.txt'，function（data）{
$ .each（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（{ b $ b位置：LatLng，
title：data.lng，
图标：bild1
}）;
google.maps.event.addListener（标记，'click'，函数（）{
infowindow.open（map，marker）;
google.maps.event.addListener（map，'click'，function（）{if（infowindow）{infowindow.close（）;} }）;
}）;
marker.setMap（map）;
}）;
}）;
}）;
< / script>
< / body>
< / html>
解决方案
> deleteOverlays（），但是你忘了在某处调用它。
I tried to refresh my markers on the map. For this i tried to push the markers into an array. Google Maps continues adding markers but not deleting the old ones. Is the array correcly implemented? What's wrong with my code?
<!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>
解决方案
You've defined the function deleteOverlays(), but you forgot to call it somewhere.
这篇关于Google使用数组映射标记刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
