Question

- 我对编码很陌生，但是慢慢地通过小提琴工作。感谢您的耐心！ -

我正致力于创建乌克兰一个小村庄侨民的视觉表现。到目前为止，我已经找到了一个小提琴，可以满足我的需要。我在以下方面遇到了麻烦：

我对单个var离开没有问题 - ＆gt; var到达线动画，按照原来的小提琴，但我无法找到有关如何添加另一条线的资源（无论是相同的var出发还是不同）。
我还想在同一行程中添加多个点。我发现的所有内容都使用了LatLng坐标列表，但我无法将其设置为动画。

任何帮助将不胜感激！谢谢！

＆＃13;

var map;
$(document).ready(function () {
    var latlng = new google.maps.LatLng(41.142556, -42.219561);
    var myOptions = {
        zoom: 2,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map_canvas').get(0), myOptions);
var departure = new google.maps.LatLng(49.461686, 23.174658); //Set to whatever lat/lng you need for your departure location
  var arrival = new google.maps.LatLng(40.6983279,-74.0433196); //Set to whatever lat/lng you need for your arrival location
    var line = new google.maps.Polyline({
    path: [departure, departure],
    strokeColor: "#FF0000",
    strokeOpacity: 0.7,
    strokeWeight: 2,
    geodesic: true, //set to false if you want straight line instead of arc
    map: map,
  });
  var step = 0;
  var numSteps = 250; //Change this to set animation resolution
  var timePerStep = 5; //Change this to alter animation speed
  var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
      clearInterval(interval);
    } else {
      var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure, arrival, step / numSteps);
      line.setPath([departure, are_we_there_yet]);
    }
  }, timePerStep);
  line.setMap(map);

});

＆＃13;

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{padding-top:25px;}
#map_canvas {
    width: 100%;
    height: 400px;
}

＆＃13;

<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
    <div class="well">
           <div id="map_canvas"></div>
    </div>
</div>

＆＃13;

Java - 如何使用谷歌地图创建多个动画测地线

0 个答案: