無法獲取js函數來加載html

我剛開始嘗試開發一個網站，如果可以，我想保持html和javascript分離。我試圖在地圖上放置一個標記，將座標放置在文本框中作爲表單的一部分，並在用戶提交表單時將它們發送到數據庫。代碼在html文檔裏面工作，但是當我嘗試分離它時，它不起作用。那麼，地圖仍然顯示出來，我可以在上面設置一個標記，但它不會捕獲座標。無法獲取js函數來加載html

在HTML

<script type="text/javascript" src="mapSubmitSighting.js"></script> 
<body onload="initMap()">

，我想在DIV中的頭JS執行

<div id="map"> 
<div class="map" onclick="initMap();"> 
<script defer 
    src="https://maps.googleapis.com/maps/api/js?key==initMap"></script> 
    </div>

JS文件

!function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: {lat: 54.621277, lng: -6.692649 } 
     }); 
    google.maps.event.trigger(map, "resize"); 
     map.addListener('click', function(e) { 
      placeMarkerAndPanTo(e.latLng, map); 

     }); 
     } 

     !function placeMarkerAndPanTo(latLng, map) { 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map 

     }); 
     map.panTo(latLng); 
     document.getElementById("lat").value = latLng.lat(); 
     document.getElementById("lng").value = latLng.lng(); 

     }

我知道有很多不妥這個，但如果我可以制定出如何讓JavaScript工作，這將是一個開始。謝謝！

來源

2016-11-14 champion_bake

你正在觸發'initMap'三次？ 'body onload =「initMap」''''onclick =「initMap（）」''＆callback = initMap' – putvande

你確定你有正確的文件名'mapSubmitSighting.js'嗎？ –

你爲什麼要用「！」來預置你的函數？ – acontell

代碼的大部分實際工作。雖然做了一些修改。添加了初始標記位置，因爲我注意到您打算在示例代碼上執行此操作。此外，重構您的代碼，以便需要的例程將可重用。

請檢查以下內容。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map { 
     height: 400px; 
     width: 50%; 
     } 
    </style> 
    <script src="mapSubmitSighting.js"></script> 
    </head> 
    <body>  
    <div id="map"></div>  
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD72DV80rL8PBw2BTTWOwHV3NPSQdx24D8&callback=initMap"></script> 

    <br/> 
    <div> 
     Latitude: <input type="text" id="lat"/><br/><br/> 
     Longitude: <input type="text" id="lng"/> 
    </div> 
    </body> 
</html>

function initMap() { 
    var initialLocation = {lat: 54.621277, lng: -6.692649 }; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: initialLocation 
    }); 

    var marker = setMarker(initialLocation, map); 
    setTextCoordinates(initialLocation.lat, initialLocation.lng); 

    google.maps.event.trigger(map, "resize"); 
    map.addListener('click', function(e) { 
    placeMarkerAndPanTo(e.latLng, map); 
    }); 
} 

function placeMarkerAndPanTo(latLng, map) { 
    var marker = setMarker(latLng, map); 

    map.panTo(latLng); 

    setTextCoordinates(latLng.lat(), latLng.lng()); 
} 

function setMarker(latLng, map){ 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map 
    }); 

    return marker; 
} 

function setTextCoordinates(lat, lng){ 
    document.getElementById("lat").value = lat; 
    document.getElementById("lng").value = lng; 
}

輸出

希望這有助於！

來源

2016-11-14 20:38:10

您可能沒有正確鏈接文件。

您可以打開開發人員工具（Chrome中的F12，或者右鍵單擊頁面的某個部分並選擇檢查元素），然後查看控制檯中的錯誤。

最有可能是404錯誤。查看文件的URL，它是否與它應該是的地方相匹配？你錯過了一個文件夾？你忘記上傳了嗎？讓我們知道，所以我們可以進一步協助！

來源

2016-11-14 20:13:05

您的意思是Chrome中的F12？ – acontell

哎呀！感謝您指出！ –

明白了，但感謝您的建議，我會嘗試尋找從現在開始，控制檯中的錯誤也一樣。 –

你也不需要！在你的js函數的開始。這阻止了你的html閱讀js文件。應該看起來像 - >

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8,`enter code here`

來源

2016-11-14 20:24:58 SamsonTheBrave

我刪除了它們，謝謝你的建議！ –

無法獲取js函數來加載html

回答

相關問題