Question

我正在开发一个使用谷歌地图javascript v3的项目。规范的一部分是两点之间的折线应该是虚线，每个破折号应该是100 px。我正在尝试使用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>

提前致谢

Answer 1

每100px重复一次100px的符号似乎给出了奇怪的结果。这适合我（每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
  });

working example

谷歌地图JavaScript v3 - 绘制SVG线

1 个答案: