谷歌地圖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線

回答

相關問題