0

我正在开发一个使用 google maps javascript v3 的项目。这是规范的一部分，两点之间的折线应该是一条虚线，每条虚线有 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 像素长的符号似乎会产生奇怪的结果。这对我有用（每 200 像素放置一个 100 像素的符号，因此有 100 像素的间隙）：

  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 回答