我如何使用latitude var_φ和longtiude var_λ值来反转城市名称。我想使用输入id的值来反转位置，以下是我的代码片段。
我尝试了几次从表单输入中获取经纬度值，但都失败了。
请你帮助我解决这个问题。
尊敬的各位
<!DOCTYPE html>
<!-- saved from url=(0049)https://zulns.github.io/prayer-times/monthly.html -->
<html lang="ar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--meta http-equiv="refresh" content="1;url="-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ihijri">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="all">
<meta name="copyright" content="ihijri">
<title>جدول أوقات الصلاة الشهري حسب الموقع</title>
<style>
body, tr, form { font-family: Arial; font-size: 13px; color: #404040; text-align: center; margin: 0; padding: 0; direction:rtl;}
.a {color:black}
}
pre { font-family: courier, serif, size: 10pt; margin: 0px 8px; }
input { font-size: 12px; }
.header { background: #eef; border-bottom: 1px solid #ddd; padding: 8px; text-align:righ;}
.caption { font-size: 20px; color: #d95722; text-align: center; width: 10em; }
.arrow { font-weight: bold; text-decoration: none; color: #3D3D3D; }
.arrow:hover { text-decoration: underline; }
.command { font-weight: bold; text-decoration: none; color: #AAAAAA; }
.command:hover { text-decoration: underline; }
.timetable { border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; margin: 0 auto; }
.timetable td { border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC; }
.head-row { color: black; font-size: 17px; font-weight: 700; height: 25px; background-color: #eef; }
.today-row { background-color: #d4f7f9;; color: black }
.button {
background-color: #b5deea;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="./Monthly Prayer Timetable_files/PrayTimes.js.download"></script>
<script src="./js/KeisanHeader.js?20190424"></script>
<script type="text/javascript">var lang='en';var is_pc=0;var loginflag=0; var nownicname=''</script>
<div class="header">
أوقات الصلاة شهريا
<a id="home" href="./index.html?2">الصفحة الرئيسية</a>
<a id="daily" href="./daily.html">يومي</a>
<a id="yearly" href="./yearly.html">سنوي</a>
</div>
<div class="header">
<div class="city">
<!--
<ul id="x">
<li>المدينة: <span id="city"></span></li>
<li>المدينة آخرى: <span id="cityAlt"></span></li>
<li>البلد: <span id="country"></span></li>
<li>رمز البلد: <span id="countryCode"></span></li>
</ul>
<p id="error"></p>
-->
</div>
<form class="form" action="javascript:update();">
خط العرض: <input autocomplete=off type='number' name='var_φ' id='var_φ' value='28.421034' onchange='update();' >
خط الطول: <input autocomplete=off type='number' name='var_λ' id='var_λ' value="48.49594" onKeyDown='nextFocus2(event)' onchange='update();'>
الإرتفاع: <input type="text" value="0" id="elevation" size="1" onchange="update();"> <button type="button" onchange="update()" onclick="googleMap('φ','λ','')" class="googleMapIdo">تحديد الموقع على الخريطة</button>
المنطقة الزمنية: <input type="text" value="8" id="timezone" size="1" onchange="update();">
DST:
<select id="dst" size="1" style="font-size: 12px;" onchange="update()">
<option value="auto" selected="selected">تلقائي</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
طريقة الحساب:
<select id="method" size="1" class="textbox_method" onchange="update()">
<option value="Makkah" selected="selected">أم القرى</option>
<option value="MWL">رابطة العالم الإسلامي (MWL)</option>
<option value="ISNA">الجمعية الإسلامية لأمريكا الشمالية (ISNA)</option>
<option value="Egypt">الهيئة المصرية العامة للمساحة</option>
<option value="Karachi">جامعة العلوم الإسلامية ، كراتشي</option>
<option value="Jafari">الشيعة أثنا الأشعري (الجعفري)</option>
<option value="Tehran">معهد الجيوفيزياء ، جامعة طهران</option>
<option value="Gulf">منطقة الخليج</option>
<option value="Kuwait">الكويت</option>
<option value="Qatar">قطر</option>
<option value="Singapore">مجلس علماء المسلمين في سنغافورة ، سنغافورة</option>
<option value="France">منظمة الاتحاد الإسلامي الفرنسي</option>
<option value="Turkey">مديرية الشؤون الدينية ، تركيا</option>
<option value="Indonesia">وزارة الأديان ، إندونيسيا</option>
</select>
<input type="button" value="تنفيذ" onclick="update()" class="bigbutton" id="executebtn">
</form>
</div>
<br>
<div id="print-area-2">
<div class="mm">
<table align="center">
<tbody>
<tr>
<td><a href="javascript:displayMonth(-1)" class="arrow"><<</a></td>
<td id="table-title" class="caption">November 2018</td>
<td><a href="javascript:displayMonth(+1)" class="arrow">>></a></td>
</tr>
</tbody>
</table>
<br>
</div>
<div align="center" style="margin-top: 7px">
- <a href=" - " class="command">-</a> |
Time Format: <a id="time-format" href="javascript:switchFormat(1)" title="Change clock format" class="command">24-hour</a>
</div>
</div>
</div>
<br>
<div><button class="button"><a href="javascript:printDiv('print-area-2');">طباعة</a></button></div>
<script>
function printDiv(elementId) {
var a = document.getElementById('printing-css').value;
var b = document.getElementById(elementId).innerHTML;
window.frames["print_frame"].document.title = document.title;
window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
<script type="text/javascript">
if (document.location.search.toLowerCase() == '?3d') {
$('home').href = '../cuboid3d.html?2';
$('daily').href = 'daily.html?3d';
$('yearly').href = 'yearly.html?3d';
}
var currentDate = new Date();
var timeFormat = 0;
$('timezone').value = -currentDate.getTimezoneOffset() / 60;
switchFormat(0);
// display monthly timetable
function displayMonth(offset) {
var lat = $('var_φ').value;
var lng = $('var_λ').value;
var elv = $('elevation').value;
var timeZone = $('timezone').value;
var dst = $('dst').value;
var method = $('method').value;
prayTimes.setMethod(method);
currentDate.setMonth(currentDate.getMonth() + 1 * offset);
var month = currentDate.getMonth();
var year = currentDate.getFullYear();
var title = monthFullName(month)+ ' '+ year;
$('table-title').innerHTML = title;
makeTable(year, month, lat, lng, elv, timeZone, dst);
}
// make monthly timetable
function makeTable(year, month, lat, lng, elv, timeZone, dst) {
var items = {day: 'اليوم', imsak: 'إمساك', fajr: 'الفجر', sunrise: 'الشروق',
dhuhr: 'الظهر', asr: 'العصر', sunset: 'الغروب',
maghrib: 'المغرب', isha: 'العشاء', midnight: 'منتصف الليل'};
var tbody = document.createElement('tbody');
var today = new Date();
tbody.appendChild(makeTableRow(items, items, 'head-row'));
var date = new Date(year, month, 1);
var endDate = new Date(year, month + 1, 1);
var format = timeFormat ? '12hNS' : '12h';
while (date < endDate) {
var times = prayTimes.getTimes(date, [lat, lng, elv], timeZone, dst, format);
times.day = date.getDate();
var isToday = (date.getMonth() == today.getMonth() && date.getDate() == today.getDate() && date.getFullYear() == today.getFullYear());
var klass = isToday ? 'today-row' : '';
tbody.appendChild(makeTableRow(times, items, klass));
date.setDate(date.getDate() + 1); // next day
}
removeAllChild($('timetable'));
$('timetable').appendChild(tbody);
}
// make a table row
function makeTableRow(data, items, klass) {
var row = document.createElement('tr');
for (var i in items) {
var cell = document.createElement('td');
cell.innerHTML = data[i];
cell.style.width = i=='day' ? '2.5em' : '4.7em';
row.appendChild(cell);
}
row.className = klass;
return row;
}
// remove all children of a node
function removeAllChild(node) {
if (node == undefined || node == null)
return;
while (node.firstChild)
node.removeChild(node.firstChild);
}
// switch time format
function switchFormat(offset) {
var formats = ['24-hour', '12-hour'];
timeFormat = (timeFormat + offset) % 2;
$('time-format').innerHTML = formats[timeFormat];
update();
}
// update table
function update() {
displayMonth(0);
}
// return month full name
function monthFullName(month) {
var monthName = new Array('يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
'يوليو', 'أغسطس', 'سبمتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر');
return monthName[month];
}
function $(id) {
return document.getElementById(id);
}
var latlng;
latlng = new google.maps.LatLng(lat, lng); // New York, US
//latlng = new google.maps.LatLng(37.990849233935194, 23.738339349999933); // Athens, GR
//latlng = new google.maps.LatLng(48.8567, 2.3508); // Paris, FR
//latlng = new google.maps.LatLng(47.98247572667902, -102.49018710000001); // New Town, US
//latlng = new google.maps.LatLng(35.44448406385493, 50.99001635390618); // Parand, Tehran, IR
//latlng = new google.maps.LatLng(34.66431108560504, 50.89113940078118); // Saveh, Markazi, IR
new google.maps.Geocoder().geocode({'latLng' : latlng}, function(results, status) {
console.log(result, status);
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var country = null, countryCode = null, city = null, cityAlt = null;
var c, lc, component;
for (var r = 0, rl = results.length; r < rl; r += 1) {
var result = results[r];
if (!city && result.types[0] === 'locality') {
for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
component = result.address_components[c];
if (component.types[0] === 'locality') {
city = component.long_name;
break;
}
}
}
else if (!city && !cityAlt && result.types[0] === 'administrative_area_level_1') {
for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
component = result.address_components[c];
if (component.types[0] === 'administrative_area_level_1') {
cityAlt = component.long_name;
break;
}
}
} else if (!country && result.types[0] === 'country') {
country = result.address_components[0].long_name;
countryCode = result.address_components[0].short_name;
}
if (city && country) {
break;
}
}
console.log("City: " + city + ", City2: " + cityAlt + ", Country: " + country + ", Country Code: " + countryCode);
document.getElementById('city').innerHTML = city;
document.getElementById('cityAlt').innerHTML = cityAlt;
document.getElementById('country').innerHTML = country;
document.getElementById('countryCode').innerHTML = countryCode;
}
} else {
document.getElementById('error').innerHTML = "Error Status: " + status;
}
});
</script>
<textarea id="printing-css" style="display:none;">
body, tr, form {
font-family: Arial;
font-size: 13px;
color: #404040;
text-align: center;
margin: 0;
padding: 0;
direction: rtl;
}
.arrow {
display: none;
text-decoration: none;
color: #3D3D3D;
}
.caption {
font-size: 40px;
color: #d95722;
text-align: center;
width: 10em;
}
.head-row {
color: black;
font-size: 17px;
font-weight: 700;
height: 25px;
background-color: #d0def9;
}
.timetable {
border-width: 1px;
border-style: outset;
border-collapse: collapse;
border-color: gray;
margin: 0 auto;
}
.timetable td {
border-width: 1px;
border-spacing: 1px;
padding: 1px;
border-style: inset;
border-color: #CCCCCC;
}
.no-print {
display: none;
}
.button {
display: none;
}
</textarea>
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
</body>
</html>
enter code here