Я провел небольшое исследование по добавлению даты и времени. Кажется, есть несколько разных способов это сделать, но мне трудно адаптировать их под себя. Мне удалось это сделать, поэтому карта по-прежнему отображается, и моя функция выбора округа работает нормально, но там, где я пытался объединить время и дату с размещением маркера, это не сработало, и размещение маркера теперь не работает. Ошибка в консоли моего браузера указывает на то, что не найден элемент, который я искал в Google, но безуспешно, за исключением отладки Firefox. Вот мой код. Если кто-нибудь может подсказать мне, где я ошибся, я был бы признателен, спасибо.
Код (разметка):
Код:
<!DOCTYPE html>
<html> <head> <!-- Google Maps and Places API --> <script type="text/javascript" src="[URL='https://wmlogs.com/yti/ZwYYwZXNodHRwOi8vbWFwcy5nb29nbGVhcGlzLmNvbS9tYXBzL2FwaS9qcz9saWJyYXJpZXM9cGxhGc9']http://maps.googleapis.com/maps/api/js?libraries=places[/URL]"></script> <!-- jQuery --> <script src="[URL='https://wmlogs.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>
