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所说，问题可能是由于您将函数调用直接放在＆lt; script＆gt;中。 - 此类代码在页面加载完成之前执行，如果代码所依赖的内容尚未可用，则可能会中断。

要解决此问题，请将代码放在加载页面后执行的函数中。如果您只关心相对现代的浏览器，请使用DOMContentLoaded事件监听器，如果您使用的是JS框架，它可能会提供一种方法来支持旧浏览器。

（强制jQuery插件：如果你使用它，语法为$(function() { /* your code here */ });）

<强>更新

您似乎未将结果从navigator.geolocation.getCurrentPosition()正确转换为google.maps.LatLng值。这是一个example from the Google documentation：

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 个答案: