google.maps Simple Polylines 

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=zh-cn
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-cn#PolylineArrays
http://ubilabs.github.io/google.maps.polyline.edit/examples/advanced.html
http://www.cnblogs.com/hanbin/archive/2011/04/18/2019889.html

var polyOptions ={
    strokeColor:'#000000',
    strokeOpacity:1.0,
    strokeWeight:3}
poly =new google.maps.Polyline(polyOptions);
poly.setMap(map);var path =newMVCArray;

$.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: Your HTML structure is all wrong:




<bodyonload="initialize()"><divid="map_canvas"style="width:90%;height:100%"></div></body></html><html><head></head><body></body></html>




shouldn't that just be




<bodyonload="initialize()"><divid="map_canvas"style="width:90%;height:100%"></div></body></html>


-----------------------------------------------------


<scripttype="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 =newMVCArray;// 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>







            

            
posted @ 
2013-06-05 21:18 
火腿骑士 
阅读(354) 
评论(0) 
编辑 
收藏 
举报