Question

我创建了一个使用Google Map API的网页 JSfiddle

allPixelsDate += dy;

The Webpage SS

我想实现一个滑块，它具有用户给出的日期限制。滑块应该是交互式的，即用户可以通过单击滑动线（例如YouTube中使用的滑块）向前或向后跳跃注意：滑块的实现和使用滑块线控制符号的动画是主要目标。设定限制是次要目标。
我尝试实现它，但无法取得成功。

Answer 1

一种选择是使用jquery-ui滑块（来自这个问题：control the animation of the symbol via a slider (in google maps)）：

$(function() {
    $("#slider").slider({
      max: 200,
      min: 0,
      change: function(event, ui) {
        console.log("ui.value=" + ui.value);
        var icons = line.get('icons');
        icons[0].offset = (ui.value / 2) + '%';
        line.set('icons', icons);
      }
    });
  });

proof of concept fiddle

代码段

var line;
var line1;

function initMap() {

  var intervalForAnimation;
  var count = 0;

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 19.0760,
      lng: 72.8777
    },
    zoom: 5,
    styles: [{
      featureType: 'all',
      stylers: [{
        saturation: -80
      }]
    }, {
      featureType: 'road.arterial',
      elementType: 'geometry',
      stylers: [{
        hue: '#00ffee'
      }, {
        saturation: 50
      }]
    }, {
      featureType: 'poi.business',
      elementType: 'labels',
      stylers: [{
        visibility: 'off'
      }]
    }]
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var symbolSource = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#FF0000',
    strokeWeight: 4
  };

  var symbolShape = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0
  };

  var symbolDestination = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  line = new google.maps.Polyline({
    path: [{
      lat: -33.918861,
      lng: 18.423300
    }, {
      lat: -35.842160,
      lng: 18.863525
    }, {
      lat: -39.170387,
      lng: 35.189209
    }, {
      lat: -26.331494,
      lng: 54.228516
    }, {
      lat: 0.462885,
      lng: 61.083984
    }, {
      lat: 19.075984,
      lng: 72.877656
    }],
    icons: [{
      icon: symbolShape,
      offset: '0%'
    }],
    strokeColor: '#0000FF ',
    strokeOpacity: 0,
    map: map
  });

  //Our Secondary polyline for reseting purpose
  var line1 = new google.maps.Polyline({
    path: [{
      lat: -33.918861,
      lng: 18.423300
    }, {
      lat: -35.842160,
      lng: 18.863525
    }, {
      lat: -39.170387,
      lng: 35.189209
    }, {
      lat: -26.331494,
      lng: 54.228516
    }, {
      lat: 0.462885,
      lng: 61.083984
    }, {
      lat: 19.075984,
      lng: 72.877656
    }],
    icons: [{
      icon: symbolSource,
      offset: '0%'
    }, {
      icon: symbolDestination,
      offset: '100%'
    }],
    strokeColor: '#0000FF ',
    strokeOpacity: 0.8,
    map: map
  });


  //Map boundaries
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < line.getPath().getLength(); i++) {
    bounds.extend(line.getPath().getAt(i));
  }
  map.fitBounds(bounds);

  function playing() {
    intervalForAnimation = window.setInterval(function() {
      $("#map").after(animateCircle(line, count));
      count = (count + 0.2) % 200;
    }, 20);
  }
  $(".play").click(function() {
    playing();
    pb = new progressBar();
    map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
  });

  $(".pause").click(function() {
    clearInterval(intervalForAnimation);
  });

  $(".reset").click(function() {
    count = 0;
    line1.setMap(map);
  });

  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.
  function animateCircle(line, count) {
    var icons = line.get('icons');
    //if ((icons[0].offset <= 100 + '%')) {
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    $("#slider").slider("value", count);
    if (count >= 199) {
      clearInterval(intervalForAnimation);
      //  line1.setMap(null);
    };
    //n++;
    //};
  }

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">


<script>
  $(function() {
    $("#slider").slider({
      max: 200,
      min: 0,
      change: function(event, ui) {
        console.log("ui.value=" + ui.value);
        var icons = line.get('icons');
        //if ((icons[0].offset <= 100 + '%')) {
        icons[0].offset = (ui.value / 2) + '%';
        line.set('icons', icons);
      }
    });
  });
</script>

<script>
  $(document).ready(function() {
    $("#datepickerFrom").datepicker();
  });
</script>
<div style="border: 1px solid black; background-color: green; padding: 5px;">
  slider
  <div id="slider"></div>
</div>

<div>
  <!--Play button-->
  <button type="button" class="play">Play</button>
  <!--Pause button-->
  <button type="button" class="pause">Pause</button>
  <!--Reset and Stop button-->
  <button type="button" class="reset">Reset</button>
</div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYJY_vFKIl-VEdyoEd3hZI8Wv1JdNzTmI&callback=initMap"></script>

使用谷歌地图api实现一个滑块

1 个答案: