- 13, May 2024
- #1
Я провел небольшое исследование по добавлению даты и времени.
Кажется, есть несколько разных способов это сделать, но мне трудно адаптировать их под себя.
Мне удалось это сделать, поэтому карта по-прежнему отображается, и моя функция выбора округа работает нормально, но там, где я пытался объединить время и дату с размещением маркера, это не сработало, и размещение маркера теперь не работает.
Ошибка в консоли моего браузера указывает на то, что не найден элемент, который я искал в Google, но безуспешно, за исключением отладки Firefox.
Вот мой код.
Если кто-нибудь может подсказать мне, где я ошибся, я был бы признателен, спасибо.
Кажется, есть несколько разных способов это сделать, но мне трудно адаптировать их под себя.
Мне удалось это сделать, поэтому карта по-прежнему отображается, и моя функция выбора округа работает нормально, но там, где я пытался объединить время и дату с размещением маркера, это не сработало, и размещение маркера теперь не работает.
Ошибка в консоли моего браузера указывает на то, что не найден элемент, который я искал в Google, но безуспешно, за исключением отладки Firefox.
Вот мой код.
Если кто-нибудь может подсказать мне, где я ошибся, я был бы признателен, спасибо.
<!DOCTYPE html>
<html>
<head>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="[URL='https://lumtu.com/yti/ZwYYwZXNodHRwOi8vbWFwcy5nb29nbGVhcGlzLmNvbS9tYXBzL2FwaS9qcz9saWJyYXJpZXM9cGxhGc9']http://maps.googleapis.com/maps/api/js?libraries=places[/URL]"></script>
<!-- jQuery -->
<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjcuMi9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]"></script>
<script type="text/javascript">
var markers = [];
function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
var up206b = {};
var map;
function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}
up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});
</script>
</head>
<body onload="up206b.initialize()">
<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>
<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >
<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>
<div id="menu" style=" position: absolute; margin: 45px 89px;" >
<select id="counties" >
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>
</div>
<script type="text/javascript">
$("#counties").on("change",function(){
var cnt=$(this).val();
var bounds = new google.maps.LatLngBounds();
switch(cnt){
case "bedfordshire":
bounds.extend(new google.maps.LatLng(
52.22, -0.41));
bounds.extend(new google.maps.LatLng(51.8797, -0.4176));
break;
case "buckinghamshire":
bounds.extend(new google.maps.LatLng(52.18, -0.83));
bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431));
break;
case "cambridgeshire":
bounds.extend(new google.maps.LatLng(52.29, -0.13));
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
break;
case "hertfordshire":
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
bounds.extend(new google.maps.LatLng(51.8031689, -0.208661));
break;
case "northamptonshire":
bounds.extend(new google.maps.LatLng(52.492298, -0.684233 ));
bounds.extend(new google.maps.LatLng(52.09, -1.03));
break;
}
map.fitBounds(bounds);
})
</script>
</div>
<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>
<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">
</div>
<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Или сброс, если нет" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>
</body>
</html>
![[вадим Якупов] Как Создать Крутой Лэндинг Всего За 2 Дня](/assets/images/icons/forum1.png){kind=icon}
