Question

我尝试将一组多边形线从一个数组添加到谷歌地图中。

这是我的代码：

<!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））;是不是在？

中添加数据

或者我有更好的方法来循环数据吗？

Answer 1

所以你循环遍历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>

Answer 2

您应该将所有代码放在initialize函数中：

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

Answer 3

从mysql数据库填充javascript数组（其余的，如我所见，你知道该怎么做）：

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

Google map api v3从数组中添加折线

3 个答案: