在页面加载期间调用函数并向 map 添加标记似乎真的很容易，但是我无法在页面加载时执行此操作并且必须在 map 加载后按搜索按钮加载并准备就绪。我尝试使用此页面:
http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/
我在主体的末尾放置了一个脚本来调用函数“addMarkers”，但没有任何反应。当我使用搜索按钮调用它时，我只能让这个函数正常工作。
map 自动加载后如何加载标记？
这是我的 html 正文:
<body>
<TR>
<TD>
<div id="map" style="width: 1250px; height: 750px"></div>
</TD>
<TD>
<!--field for start-->
<p>Start Date Time:</p>
<form method="post" action="">
<!--addMarkers button is called and executed correctly when this button is pressed-->
<input type="button" value="Search" onclick="addMarkers()">
</form>
</TD>
</TR>
<!--this does nothing or is not executed as I hoped-->
<script>
window.onload=addMarkers() ;
</script>
</body>
我的 map 加载函数位于我的 html 文档的末尾:
<script type="text/javascript">
//***************Function moved out of header***************************************************
var map;
var markersArray = [];
var startformat;
var endformat;
function load() {
var myOptions = {
center: new google.maps.LatLng(42, -70),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
alert("Click search to look for markers.");
}
load();
</script>
如果有什么我可以澄清的，请告诉我。
编辑: addMarkers() 使用显示的 map 区域和来自两个文本字段的一些文本。就像人们一直在说的那样，似乎功能在一切准备就绪之前就已经执行了。我需要先加载页面上的所有内容，然后以某种方式执行 addMarkers()...
这是我现在拥有的，但与以前一样工作。在我按下搜索按钮之前不会生成标记:
//************Part of head***************************************************
<script src="addcreateclear_Markers.js"></script>
<script type="text/javascript">
var map;
var markersArray = [];
var startformat;
var endformat;
function load() {
var myOptions = {
center: new google.maps.LatLng(42, -70),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
addMarkers();
//alert("Click search to look for markers.");
}
</script>
</head>
<!--************Function in body***************************************************-->
<body onload='load()'>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
<TR>
<TD>
<div id="map" style="width: 1250px; height: 750px"></div>
</TD>
<TD>
<!--field for start-->
<p>Start Date Time:</p>
<form method="post" action="">
<input type="button" value="Search" onclick="addMarkers()">
</form>
</TD>
</TR>
</TABLE>
<script>
window.onload = addMarkers();
</script>
</body>
更多编辑: 在 html 主体的末尾调用此函数可以按我的意愿进行操作:
<script type="text/javascript">
function addMarkersLag() {
//Print the map object out to the console
console.log(map);
//Zoom in on the map after 2 seconds so you can see this function being called
window.setTimeout(function() {
addMarkers();
alert("Does it work?.");
}, 1000);
}
</script>
最佳答案
我要求提供更多代码，这样我才能给你一个我更有把握的答案。和这里的其他答案一样，我的答案有点猜测，因为我们没有完整的源代码。
您似乎将 load() 函数移到了文件末尾。所以可能发生的情况是 window.onload(您的 addMarkers() 函数)实际上在执行 map 脚本之前触发。如果这不正确，请发表评论和/或使用更多信息更新您的原始问题。
参见 here关于何时触发 window.onload 的问题。
编辑:参见JSFiddle for the working code below :
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function addMarkers() {
//Print the map object out to the console
console.log(map);
//Zoom in on the map after 2 seconds so you can see this function being called
window.setTimeout(function() {
map.setZoom(10);
}, 3000);
}
</script>
<body onload='load()'>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
<TR>
<TD>
<div id="map" style="width: 1250px; height: 750px"></div>
</TD>
<TD>
<!--field for start-->
<p>Start Date Time:</p>
<form method="post" action="">
<input type="button" value="Search" onclick="addMarkers()">
</form>
</TD>
</TR>
</TABLE>
<script>
function load() {
var myOptions = {
center: new google.maps.LatLng(42, -70),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
alert("Click search to look for markers.");
}
load();
//***************Function moved out of header***************************************************
var map;
var markersArray = [];
var startformat;
var endformat;
addMarkers();
</script>
</body>
关于javascript - 如何在网页首次加载时向 map 添加标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10433282/