Google map api v3 ajouter des polylignes à partir de la matrice de

J'essaye d'ajouter un ensemble de polylignes à une carte google map à partir d'un tableau.

Voici mon code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 90% }
body { height: 90%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//var myLatLng = new google.maps.LatLng(0, -180);
}
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>

Des idées sur le pourquoi de la ligne de chemin de.push(new google.cartes.LatLng(val.lat, val.longi)); n'est pas d'ajouter les données?

Ou est-il une meilleure façon pour moi de boucler les données?

  • J'ai ajouté des éléments de réponses, mais je suis un MVCArray non défini erreur lorsque je charge la page...les pensées?
InformationsquelleAutor Loren Zimmer | 2011-11-18
  1. 8

    De sorte que vous passer en boucle le contenu de data, l'ajout d'éléments dans le tableau, path.... et puis, quoi? Rien d'aussi loin que je peux voir. Sans doute, vous souhaitez utiliser ce chemin de tableau pour définir le chemin d'accès de votre polyligne.

    var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
//now update your polyline to use this path
poly.setPath(path);
});

    PS: Votre structure HTML est tout faux:

    <body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>

    ne pourrait-il pas être juste

    <body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
    • EST-ce une bonne var path = new MVCArray; ?
    • ne pas utiliser un MVCArray, il suffit de créer un tableau normal: var path = [];
    InformationsquelleAutor duncan
  2. 1

    Vous devriez mettre tout le code dans la fonction d'initialisation:

    <script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//map is already declared
//var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
//every time the path is updated, automatically the map will update the polyline
poly.setPath(path);
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
}
</script>
    InformationsquelleAutor Francisco Valdez
  3. 0

    pour remplir un tableau javascript à partir d'une base de données mysql (pour le reste, comme je l'ai vu, vous savez comment faire):

    <?php 
//replace this to load from database
//populate array
for($j=0;$j<10;$j++){
$arrayData[$j] = $j*3;
}
?>
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
<?php
//populate JS array
for($i=0;$i<10;$i++){
?>
myArray[<?php echo $i;?>]="<?php echo $arrayData[$i];?>";
<?php }?>
-->
</script>

    si vous souhaitez exécuter cette et de le tester, il suffit d'inclure le bon html balises d'en-tête avant que le script et cela par la suite (vous pouvez évidemment supprimer la fin du script et de commencer les balises de script -pour le style)

    <script language="javascript" type="text/javascript">
<!--
function showData(){
for (var i=0;i<myArray.length;i++){
document.getElementById('output').innerHTML += "array position: "+i+"  array content: "+myArray[i]+"<br>";
}
}
-->
</script>
</head>
<body onLoad="showData();">
<div id="output"></div>
</body>
</html>
    InformationsquelleAutor tony gil