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

Question

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

Lor*_*mer 2 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; 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>

Run Code Online (Sandbox Code Playgroud)

关于为什么行path.push的任何想法(new google.maps.LatLng(val.lat,val.longi)); 是不是在添加数据？

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

Answer 1

dun*_*can 8

所以你循环遍历内容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);
});

Run Code Online (Sandbox Code Playgroud)

PS:您的HTML结构完全错误:

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

</body>

</html>

<html>
<head>

</head>
<body>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

不应该只是

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

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，7 月前
查看次数：	18535 次
最近记录：	14 年，4 月前