Javascript Google map api v3从数组添加多段线_Javascript_Google Maps Api 3

Javascript Google map api v3从数组添加多段线

javascript google-maps-api-3

Javascript Google map api v3从数组添加多段线,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我试图从一个数组向谷歌地图添加一组多边形线这是我的密码： <!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; paddin

我试图从一个数组向谷歌地图添加一组多边形线

这是我的密码：

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


html{高度：90%}
正文{高度：90%；边距：0；填充：0}
#地图画布{高度：100%}
var-poly；
var映射；
函数初始化（）{
var latlng=新的google.maps.latlng（38.698044，-77.210411）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//var mylatng=new google.maps.LatLng（0，-180）；
}
var多选项={
strokeColor:“#000000”，
笔划不透明度：1.0，
冲程重量：3
}
poly=新的google.maps.Polyline（多选项）；
poly.setMap（map）；
var路径=新的MVCArray；
$.getJSON（'json.php'，函数（数据）{
//var项目=[]；
$。每个（数据、函数（键、值）{
push（新的google.maps.LatLng（val.lat，val.longi））；
});
});
变量myOptions={
缩放：12，
//中心：myLatLng，
mapTypeId:google.maps.mapTypeId.TERRAIN
};

关于为什么要使用line path.push（新的google.maps.LatLng（val.lat，val.longi））的想法；没有在中添加数据吗

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

因此您可以循环

数据的内容，将内容添加到数组中，路径
。。。。然后呢，什么？据我所知什么都没有。然后，您可能希望使用该路径数组设置多段线的路径
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>

您应该将所有代码放在初始化函数中：
<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>


var-poly；
var映射；
函数初始化（）{
var latlng=新的google.maps.latlng（38.698044，-77.210411）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//地图已声明
//var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var多选项={
strokeColor:“#000000”，
笔划不透明度：1.0，
冲程重量：3
}
poly=新的google.maps.Polyline（多选项）；
poly.setMap（map）；
var路径=新的MVCArray；
//每次更新路径时，地图都会自动更新多段线
poly.setPath（path）；
$.getJSON（'json.php'，函数（数据）{
//var项目=[]；
$。每个（数据、函数（键、值）{
push（新的google.maps.LatLng（val.lat，val.longi））；
});
});
变量myOptions={
缩放：12，
//中心：myLatLng，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
}
要从mysql数据库填充javascript数组（其余的，如我所见，您知道如何操作）：


如果您想运行并测试它，只需在脚本之前包含适当的html头标记，然后再添加（显然您会删除结束脚本和开始脚本标记-用于样式）

我已经添加了两个答案的元素，但是当我加载页面时，我得到了一个MVCArray not defined错误…想法？不要使用MVCArray，只需创建一个普通数组：var path=[]；
<?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>

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