Редактировать: Я испортил название, извините!
Я бы опубликовал весь код, но он стал слишком длинным, поэтому я постараюсь объяснить это как можно лучше, и я добавлю более короткую версиюкод. У меня есть ползунок, который отображает дату, а под ней я добавил карты Goggle, работающие на пользовательском API, чтобы отобразить на нем пользовательскую карту. Мне было интересно, как я могу добавить маркеры на эту карту Google, которые будут появляться или исчезать на карте в зависимости от положения ползунка, это возможно? Под маркером я имею в виду фотографию, маркер карты Google или что-либо более удобное для показа на этой пользовательской карте.
Это код моего слайдера, (написанный участником сообщества здесь RobG!)
<center>
<body>
<input id="r0" type="range" min="0" max="1448" value="0" class="slider"><br>
<hr>
<input id="d0" type="date" min="1900-01-01" max="1904-01-01" value="1918-01-01">
<script type="text/javascript">
// Parse date in YYYY-MM-DD format as local date
function parseISOLocal(s) {
let [y, m, d] = s.split('-');
return new Date(y, m - 1, d);
}
// Format date as YYYY-MM-DD
function dateToISOLocal(date) {
let z = n => ('0' + n).slice(-2);
return date.getFullYear() + '-' + z(date.getMonth() + 1) + '-' + z(date.getDate());
}
// Convert range slider value to date string
function range2date(evt) {
let dateInput = document.querySelector('#d0');
let minDate = parseISOLocal(dateInput.defaultValue);
minDate.setDate(minDate.getDate() + Number(this.value));
dateInput.value = dateToISOLocal(minDate);
}
// Convert entered date to range
function date2range(evt) {
let date = parseISOLocal(this.value);
let numDays = (date - new Date(this.min)) / 8.64e7;
document.querySelector('#r0').value = numDays;
}
window.onload = function() {
let rangeInput = document.querySelector('#r0');
let dateInput = document.querySelector('#d0');
// Get the number of days from the date min and max
// Dates in YYYY-MM-DD format are treated as UTC
// so will be exact whole days
let rangeMax = (new Date(dateInput.max) - new Date(dateInput.min)) / 8.64e7;
// Set the range min and max values
rangeInput.min = 0;
rangeInput.max = rangeMax;
// Add listener to set the date input value based on the slider
rangeInput.addEventListener('input', range2date, false);
// Add listener to set the range input value based on the date
dateInput.addEventListener('change', date2range, false);
}</script></center>
И код для пользовательской карты отсюда https://gist.github.com/clhenrick/dcce31036d3e3940c55b31ddb86ca1ec#file-index-html. Я немного изменил ее для отображения другой карты, но не могу опубликовать ее здесь, потому что она не будет отображаться правильно. В противном случае код полностью совпадает.
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
/* styles */
html, body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var TILE_URL = 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
var map;
var mapEl;
var layer;
var layerID = 'my-custom-layer';
window.initMap = function() {
// Select the element with id="map".
mapEl = document.querySelector('#map');
// Create a new map.
map = new google.maps.Map(mapEl, {
center: new google.maps.LatLng(39.8282, -98.5795),
zoom: 4
});
// Create a tile layer, configured to fetch tiles from TILE_URL.
layer = new google.maps.ImageMapType({
name: layerID,
getTileUrl: function(coord, zoom) {
console.log(coord);
var url = TILE_URL
.replace('{x}', coord.x)
.replace('{y}', coord.y)
.replace('{z}', zoom);
return url;
},
tileSize: new google.maps.Size(256, 256),
minZoom: 1,
maxZoom: 20
});
// Apply the new tile layer to the map.
map.mapTypes.set(layerID, layer);
map.setMapTypeId(layerID);
};
</script>
<!-- NOTE: The 'key' parameter should be replaced with your Google Maps API Key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM"></script>
</body>
</html>
Можно ли каким-либо образом связать ползунок выше с картой?