Google Maps JavaScript v3 - Рисование линии SVG

Я работаю над проектом, который использует google maps javascript v3. Часть спецификации состоит в том, что полилиния между двумя точками должна быть пунктирной линией и каждой меткой 100 px. Я пытаюсь сделать это с помощью SVG, но даже я поставил правильный пиксель и повторю, они работают неправильно. Полный тестовый код:Google Maps 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 долго повторять каждый 100px, кажется, дает странные результаты. Это работает для меня (поставив 100px символ каждый 200px, так что есть 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

Google Maps JavaScript v3 - Рисование линии SVG

ответ

Смежные вопросы