0
Google Map APIを使用するウェブページを作成しました。
JSfiddle
GoogleマップAPIを使用してスライダーを実装
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.
var 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);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
//n++;
//};
}
}
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.
var 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);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
}
}
私はそれをユーザーが指定した日付の限界を持っているスライダーを実装したいです。スライダーはインタラクティブでなければなりません。つまり、YouTubeで使用されているスライダーなどのスライダーをクリックするだけで、前後にジャンプできます。
注：スライダを実装し、スライダラインでシンボルのアニメーションを制御することが主な目的です。限界を設定することは副次的な目的です。
私はそれを実装しようとしましたが、成功することができませんでした。