J'essaie d'ajouter un ensemble de lignes poly à une carte Google à 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>

Toute idée de la raison pour laquelle la ligne path.push (nouveau google.maps.LatLng (val.lat, val.longi)); n'ajoute pas les données?

Ou existe-t-il un meilleur moyen pour moi de boucler les données?

2
Loren Zimmer 18 nov. 2011 à 04:34

3 réponses

Meilleure réponse

Vous parcourez donc le contenu de data, en ajoutant des éléments dans le tableau, path .... et ensuite, quoi? Rien d'aussi loin que je puisse voir. Vraisemblablement, vous souhaitez ensuite utiliser ce tableau de chemins pour définir le chemin 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>

Ça ne devrait pas être juste

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

</body>

</html>
9
duncan 18 nov. 2011 à 01:36

Pour remplir un tableau javascript à partir d'une base de données mysql (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 voulez l'exécuter et le tester, il suffit d'inclure les balises html head appropriées avant le script et ensuite (vous supprimez évidemment le script de fin et commencez 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>
0
tony gil 21 févr. 2012 à 04:24

Vous devez mettre tout votre 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>
1
Francisco Valdez 18 nov. 2011 à 01:49