0

Google マップの JavaScript v3 を使用するプロジェクトに取り組んでいます。2 点間のポリラインが破線で、各破線が 100 ピクセルであることは仕様の一部です。私は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>

前もって感謝します

4

1 に答える 1

0

長さ 100 ピクセルのシンボルを 100 ピクセルごとに繰り返すと、奇妙な結果が生じるようです。これは私にとってはうまくいきます（200pxごとに100pxのシンボルを配置するため、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
  });

実施例

于 2013-06-11T23:02:43.757 に答える