当前位置:编程学习 > JAVA >>

googleMap中虚线的绘制方法

在做项目中碰到要绘制预测路径,这种一般都是用虚线绘制。查了好久没弄出来,后来在一同事的推荐发现了googleMap的一个官方网站有这种绘制demo,总结一下供大家借鉴
 
代码供上
 
[javascript]
function drawPrePath(array,color){  
    
  var sorrow={  
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW //arrow  
  };  
  var lineSymbol = {  
  path: 'M 0,-1 0,1',  
  strokeOpacity: 1,  
  scale: 3  
  };  
  var pathCoord = [  
  new google.maps.LatLng(37.772323, -122.214897),new google.maps.LatLng(21.291982, -157.821856),  
  new google.maps.LatLng(-18.142599, 178.431),new google.maps.LatLng(-27.46758, 153.027892)  
  ];  
  path = new google.maps.Polyline({  
  path: pathCoord ,  
  strokeColor:"#2d2d2d",  
  strokeOpacity: 0,  
  strokeWeight: 2,  
  icons:[{icon:lineSymbol,offset: '0',repeat: '20px'}],  
  map:map  
  });  
  path.setMap(map);  
}  
 
重点代码:
 
 
  var lineSymbol = {path: 'M 0,-1 0,1',strokeOpacity: 1,scale: 3};
 
关键在于’M 0,-1 0,1’ 其实这是SVG的绘制路径的写法,具体什么意思我还解释不清楚。嘻嘻 自己学svg教程吧!
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,