1

在页面加载期间调用函数并向地图添加标记似乎真的很容易，但是我无法在页面加载时执行此操作，并且必须在地图加载并准备好后按下搜索按钮. 我尝试使用此页面：

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>
4

3 回答 3

1

您在load()DOM 完成加载之前调用该函数。将对函数的调用移动到 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 （查看源代码）

于 2012-05-03T14:46:51.117 回答
1

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

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

有关何时被解雇的问题，请参见此处。window.onload

编辑：见JSFiddle 下面的工作代码：

    <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>
于 2012-05-03T17:14:07.810 回答
0

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

 <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>
于 2012-05-03T14:46:25.647 回答