谷歌地图JavaScript v3 - 绘制SVG线

我正在使用谷歌地图javascript v3的项目。这是规范的一部分，两点之间的多段线应该是虚线，每个短划线都为100像素。我试图用SVG做到这一点，但即使我把正确的像素和重复，他们不能正常工作。完整的测试代码：谷歌地图JavaScript v3 - 绘制SVG线

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCVAP6DE_JqWMsxnW1VEUhHww_Ry-hMnCU&sensor=false&language=pt&region=BR"> 
</script> 
<script type="text/javascript"> 


var line; 

function initialize() { 

    var mapOptions = { 
    center: new google.maps.LatLng(-22.9124683, -43.22675570000001), 
    zoom: 17, 
    scaleControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var lineCoordinates = [ 
    new google.maps.LatLng(-22.9124683, -43.22675570000001), 
    new google.maps.LatLng(-22.9124683, -10.149956), 
    new google.maps.LatLng(-22.9124683, 1.831395299999940000) 
    ]; 

    var lineSymbolTracejado = { 
    path: 'm 0,0 0,100', 
    scale: 1, 
    strokeOpacity: 1, 
    strokeColor: '#000000' 
    //strokeColor: '#FFFFFF' 
    }; 

    var lineSymbol = { 
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, 
    scale: 1, 
    strokeOpacity: 1, 
    strokeColor: '#000000' 
    }; 

    line = new google.maps.Polyline({ 
    path: lineCoordinates, 
    strokeOpacity: 0.0, 
    geodesic: false, 
    strokeColor: '#000000', 
    icons: [ 
    {icon: lineSymbol}, 
    {icon: lineSymbolTracejado,offset: '100%',repeat: '100px'}, 
    ], 
    zIndex: 0, 
    map: map 
    }); 
} 


function animateCircle() { 
    var count = 0; 
    offsetId = window.setInterval(function() { 
     count = (count + 1) % 200; 
     var icons = line.get('icons'); 
     icons[0].offset = (count/2) + '%'; 
     line.set('icons', icons); 
    }, 20); 

} 


function anima() { 
    setTimeout(function() {animateCircle();}, 1000); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, 'load', anima); 





</script> 
</head> 
<body> 
<div id="map-canvas"/> 
</body> 
</html>

在此先感谢

来源

2013-06-11 Cateno Viglio

有一个符号100px的长期重复每100像素似乎给奇怪的结果。这对我的作品（把一个100px的符号每200像素，所以有100px的间隙）：

var lineSymbolTracejado = { 
    path: 'M 0,-50 0,50', 
    scale: 1, 
    strokeOpacity: 1, 
    strokeColor: '#000000' 
    }; 

    line = new google.maps.Polyline({ 
    path: lineCoordinates, 
    strokeOpacity: 0, 
    icons: [{ 
     icon: lineSymbolTracejado, 
     offset: '0', 
     repeat: '200px' 
    }], 
    map: map 
    });

working example

来源

2013-06-11 23:02:43 geocodezip

谷歌地图JavaScript v3 - 绘制SVG线

回答

相关问题