Google map api v3 добавляет полилинии из массива - PullRequest
Новая
       2

Google map api v3 добавляет полилинии из массива

2 голосов
/ 18 ноября 2011

Я пытаюсь добавить набор линий на карту Google из массива.

Вот мой код: 

<!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>

Любые мысли о том, почему строка path.push (new google.maps.LatLng (val.lat, val.longi));не добавляет данные в?

Или есть ли лучший способ для меня зациклить данные?

Ответы [ 3 ]

8 голосов
/ 18 ноября 2011

Итак, вы перебираете содержимое data, добавляете вещи в массив, path .... и что дальше? Ничего, насколько я могу видеть. Предположительно, вы затем захотите использовать этот массив путей, чтобы задать путь для вашей полилинии. 

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: Ваша HTML структура неверна: 

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

</body>

</html>

<html>
<head>

</head>
<body>

</body>
</html>

не должно быть просто 

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

</body>

</html>
1 голос
/ 18 ноября 2011

Вы должны поместить весь свой код в функцию инициализации: 

<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>
0 голосов
/ 21 февраля 2012

для заполнения массива javascript из базы данных mysql (остальное, как я видел, вы знаете, как это сделать): 

<?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>

если вы хотите запустить и протестировать его, просто включите соответствующие теги заголовка html перед сценарием, а затем - после этого (очевидно, вы удалите конечный сценарий и начните теги сценария - для стиля) 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...