如何在網頁第一次加載時向地圖添加標記？

看起來在頁面加載過程中調用一個函數並向地圖添加標記真的很容易，但是當頁面加載時我無法做到這一點，並且在加載地圖後必須按下搜索按鈕並準備好了。我嘗試使用此頁：如何在網頁第一次加載時向地圖添加標記？

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（）使用顯示的地圖區域和來自兩個文本字段的一些文本。就像人們一直說的那樣，似乎這個功能在一切準備就緒之前就已經被執行了。我需要得到everyting在頁面加載第一，然後以某種方式執行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>

來源

2012-05-03 Stagleton

之前，你'的onload（）'您的地圖標記，你應該有你的地圖加載第一。注意順序。 – Raptor

備註：標籤始終使用小寫字母。（''而不是''） – Christoph

您的代碼添加標記的位置在哪裏？另外，您需要在地圖加載後添加標記。 – Pete

我要求莫所以我可以給你一個我更確定的答案。像這裏的其他答案一樣，我的猜測是一個猜測，因爲我們沒有完整的源代碼。

看起來您已將您的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>

來源

2012-05-03 17:14:07 Pete

嘿，是的，我認爲這就是發生的事情。我試圖改變我的代碼，但似乎我無法在地圖渲染後執行addMarkers（）函數。我試過改變順序，但load（）函數需要在大多數腳本之後。我可以嘗試添加更多的代碼，如果它會幫助，但我已經改變了相當的HTML，我不想改變這個問題太多 – Stagleton

@Stagleton這是如何工作？我不得不添加自己的'addMarkers（）'函數，但我認爲這是你想要的。此外，我們正試圖回答您的問題，以便儘可能多地編輯原始文章，以便向我們提供我們所需的信息。如果我們不能回答這個問題，這個問題對任何人都沒有幫助，包括你。 – Pete

嘿，謝謝。盡我所能添加您需要的所有信息。我非常感謝幫助。這看起來有希望。今天晚些時候我會在睡眠和更新進度後進行編輯。再次感謝。 g-night – Stagleton

爲什麼不能簡單地調用直接在地圖創建後的函數？

<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-03 14:46:25 jenswirf

我試過了，但它不起作用。不知道爲什麼。從邏輯上看，在創建地圖之後，addMarkers函數應該沒有任何問題。 – Stagleton

你在控制檯中是否收到錯誤信息？ – jenswirf

您在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 （查看源）

來源

2012-05-03 14:46:51 andresf

我無法以這種方式工作。我的addMarkers（）方法使用地圖區域信息和來自下一個字段的信息來生成。也許這是問題的一部分。： -/ – Stagleton

@andresf我認爲設置一個'window.onload = fxn;'應該調用'fxn'函數_ DOM設置完成後，所有的圖像都完成加載。你爲什麼說在DOM完成加載之前load（）會被調用？ –

@SeanMickey因爲用戶有一個他創建的稱爲load（）的函數。他不是在談論'window.onload'。真的，我認爲他的問題沒有足夠的信息來回答，但他似乎不願意添加更多的代碼... – Pete

如何在網頁第一次加載時向地圖添加標記？

回答

相關問題