google-maps-api-3 - 如何在谷歌地图信息窗口上显示时钟
问题描述
我正在尝试在我的信息窗口上显示时钟。当我登录 webconsole 时时钟运行良好,但每当我尝试在我的信息窗口上显示它时,它就无法工作,它会显示“未定义”。
我尝试添加GetClock()
返回时间的函数,如下所示:
var MiamiContent =
'<h3> Miami </h3><br ><h5>'+ setInterval(GetClock, 1000) +' </h5>'
var MiamiInfoCard = new google.maps.InfoWindow
({
content: MiamiContent
});
这是返回时间的函数。它工作正常。
tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
function GetClock() {
var d = new Date();
var nday = d.getDay(), nmonth = d.getMonth(), ndate = d.getDate(), nyear = d.getYear(), nhour = d.getHours(), nmin = d.getMinutes(), nsec = d.getSeconds(), ap;
if (nhour == 0) { ap = " AM"; nhour = 12; }
else if (nhour < 12) { ap = " AM"; }
else if (nhour == 12) { ap = " PM"; }
else if (nhour > 12) { ap = " PM"; nhour -= 12; }
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
}
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
}
我假设我在 MiamiContent 变量中调用函数的方式有问题,因为该函数确实在我的控制台中工作。或者是因为我将它记录在我的函数中并且信息窗口不知道如何“记录”事物。非常感谢帮助
解决方案
如果您希望GetClock
函数显示在 的 DOM 中InfoWindow
,则需要编写代码来执行此操作。例如:
var MiamiContent =
'<h3> Miami </h3><br ><h5><span id="clock"></span></h5>'
var MiamiInfoCard = new google.maps.InfoWindow({
content: MiamiContent
});
然后在GetClock
:
tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
function GetClock() {
var d = new Date();
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
var clockSpan = document.getElementById('clock');
if (!!clockSpan) {
clockSpan.textContent = tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "";
}
}
GetClock
并且您可以在函数中启动该函数的间隔计时器initMap
。
代码片段:
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
var uluru = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var MiamiContent =
'<h3> Miami </h3><br ><h5><span id="clock"></span></h5>'
var MiamiInfoCard = new google.maps.InfoWindow({
content: MiamiContent
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
MiamiInfoCard.open(map, marker);
});
setInterval(GetClock, 1000);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script>
tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
function GetClock() {
var d = new Date();
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
var clockSpan = document.getElementById('clock');
if (!!clockSpan) {
clockSpan.textContent = tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "";
}
}
</script>
推荐阅读
- tensorflow - CUDA/TensorFlow 兼容性
- python - Pandas:如果字段中的值为 None/null/NaN,则将该字段的名称附加到新字段
- python - FastAPI 中间件窥探响应
- python - 如何使用它们的绝对值对包含复数的列表进行排序?
- mysql - 无法在 sql 中结合 BY 进行像样的查询
- amazon-web-services - S3 不返回子文件夹键。它只是返回子文件夹中的所有文件
- python - Numpy float16:不同索引顺序的不同求和结果
- javascript - JSX 在生成图像时加载图像
- php - 链接不起作用
- azure-data-explorer - Kusto 不重复计数