Je suis nouveau sur Google Maps et Javascript. Je travaille sur un projet dans lequel je dois tracer un chemin mobile sur la carte en utilisant les latitudes et longitudes. J'ai plus de 76000 coordonnées. J'ai donc essayé l'explication sur ce lien-: Animate route on Google MapsObtenir une erreur dans l'animation des polylignes dans Google Map en utilisant javascript
J'ai un fichier .csv pour mes coordonnées. Si j'ai un code fixe, les valeurs que j'obtiens la carte. Lorsque j'essaie d'importer mon fichier .csv et de tracer la carte, j'obtiens des erreurs.
Je reçois le messages- d'erreur suivant: (1) Uncaught RangeError: taille de la pile d'appel maximum dépassé (2) InvalidValueError: setCenter: pas un LatLng ou LatLngLiteral: en propriété lat: pas de numéro
lat,lon,loc
29.718922,-95.339162,UH
29.71683047,-95.40166506,RU
30.0575359,-95.1902986,KW
29.748425,-95.677353,GB
29.739545,-95.462716,GL
<!DOCTYPE html>
<html>
<head>
<title>Animated route</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&libraries=geometry"></script>
<script>
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: {lat: pathCoords[0].lat, lng: pathCoords[0].lng},
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoRefresh(map);
}
function moveMarker(map, marker, latlng)
{
marker.setPosition(latlng);
map.panTo(latlng);
}
function autoRefresh(map)
{
var i, route, marker;
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker=new google.maps.Marker({map:map,icon:"http://maps.google.com/
mapfiles/ms/micons/blue.png"});
for (i = 0; i < pathCoords.length; i++) {
setTimeout(function (coords)
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
route.getPath().push(latlng);
moveMarker(map, marker, latlng);
}, 2000 * i, pathCoords[i]);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var pathCoords=[];
d3.csv("houston.csv", function(data)
{
data.map(function(d)
{
pathCoords.push([d.lat,d.lon]);
})
console.log(pathCoords);
});
/*var pathCoords = [
{
"lat": 29.718922,
"lng": -95.339162
},
{
"lat": 29.71683047,
"lng": -95.40166506
},
{
"lat": 30.0575359,
"lng": -95.1902986
},
{
"lat": 8.52426,
"lng": 76.93668000000001
}
];*/
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Ce n'est pas comme ça que ça fonctionne. La méthodologie est que vous nous montrez votre code et dites comment il répond ou non aux exigences. – lit
@lit J'ai mis à jour cet article avec mon code et les messages d'erreur que je reçois. Pouvez-vous s'il vous plaît aller à travers et laissez-moi savoir où je me trompe. –
@duncan Pouvez-vous s'il vous plaît regarder dans ce code et fournir de l'aide? –