Question

在页面加载过程中调用函数并向地图添加标记似乎非常容易，但是在页面加载时我无法执行此操作，并且必须在地图后按下搜索按钮装满了。我尝试使用此页面：

http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/

我在我的身体末尾放了一个脚本来调用函数'addMarkers'，但没有任何反应。当我使用搜索按钮调用它时，我只能使此功能正常工作。

如何在自动加载地图后加载标记？

这是我的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>

我的地图加载函数位于我的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（）使用显示的地图区域和两个文本字段中的一些文本。就像人们一直在说的那样，似乎功能在一切准备就绪之前就已经被执行了。我需要首先加载页面上的每一个，然后以某种方式执行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>

Answer 1

在DOM完成加载之前，您正在调用load()函数。将调用函数移动到HTML中的正文：

<body onload='load()'>

在实例化地图对象后应该调用addMarkers（）：

map = new google.maps.Map(document.getElementById("map"),myOptions);
addMarkers();

这是一个显示如何加载标记的示例：

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple （查看来源）

Answer 2

我要求更多代码，所以我可以给你一个我更确定的答案。就像其他答案一样，我有点猜测，因为我们没有完整的源代码。

好像你将load()函数移到了文件的末尾。所以可能发生的事情是window.onload（你的addMarkers()函数）实际上是在执行地图脚本之前触发的。如果这不正确，请发表评论和/或更新原始问题，并提供更多信息。

有关window.onload何时被解雇的问题，请参阅here。

编辑：请参阅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>

Answer 3

为什么不在创建地图后直接调用该函数？

 <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.");

addMarkers();    <---- ADDED HERE

}
load();
</script>

首次加载网页时如何向地图添加标记？

3 个答案: