在腳本標簽內的其他地方調用函數不起作用

Question

出於某種原因，同一腳本標簽中的代碼運行良好，但從其他腳本標簽調用包含相同代碼的函數則不行。

在我的代碼中，我在標題中有一個谷歌地圖腳本，它工作得很好，我們稱之為腳本標簽 (A)。

問題是，當我不在腳本標簽 A 中並且想要從另一個腳本標簽調用腳本 A 中的函數以重用它時。 不起作用。 但是，如果我從該函數復制代碼並將其直接放在同一個標簽中，它將起作用。

我希望能夠調用它不再寫它。 我的代碼有什么問題？

完整代碼：

<html>
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 <script
    src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
//this is the function that I want call
function getAddress(location) {
    var geocoder = new google.maps.Geocoder();
    var latLng = new google.maps.LatLng(location.lat(), location.lng());
    geocoder.geocode({
        latLng: latLng
    },
        function (responses) {
            if (responses && responses.length > 0) {
                $("#addressResult").text(responses[0].formatted_address);
                // alert(responses[0].formatted_address);
            } else {
                alert('Cannot determine address at this location.');
            }
        });
}
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);

    });

}
var marker
function placeMarker(location) {
    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }
    //calling it inside and it's working
    getAddress(location);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>


<body>
<label>Location: </label>
                    <label id="addressResult"></label>
                    <input type="button" value="Current Location" onclick="getLocation()" />
<script>
                            var x = document.getElementById("addressResult");
                        function getLocation() {
                            if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(showPosition);
                            } else {
                                x.innerHTML = "Geolocation is not supported by this browser.";
                            }
                        }

                        function showPosition(position) {
                           //here where I want to call it
                            getAddress(position);
                            }
</script>
  <div id="googleMap" style="width: 500px; height: 380px;"></div>

                        <div>
</body>
</html>

Answer 1

正如 Ed 所提到的，問題可能是由於您將函數調用直接放在 <script> 中——此類代碼在頁面加載完成之前執行，如果您的代碼所依賴的某些內容尚不可用，則可能會中斷。

要解決這個問題，請將代碼放在頁面加載后執行的函數中。 如果您只關心相對現代的瀏覽器，請使用DOMContentLoaded事件偵聽器，如果您使用的是 JS 框架，它可能提供了一種在支持舊瀏覽器的同時執行此操作的方法。

（強制性的 jQuery 插件：如果你正在使用它，語法是$(function() { /* your code here */ }); ）

更新

看來您沒有正確地將結果從navigator.geolocation.getCurrentPosition()轉換為google.maps.LatLng值。 以下是Google 文檔中的一個示例：

navigator.geolocation.getCurrentPosition(function(position) {
  var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

更新 #2（來自 OP）：更改showPosition如下修復了問題：

function showPosition(position) {
   var initialLocation = new google.maps.LatLng(
                           position.coords.latitude, 
                           position.coords.longitude);

   getAddress(initialLocation);
}

在腳本標簽內的其他地方調用函數不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2016-04-04 00:09:08

在腳本標簽內的其他地方調用函數不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-04 00:09:08

解決方案1
1 已采納 2016-04-04 00:09:08