javascript - 未捕获ReferenceError:未定义geolocate

我在Internet上找不到适合我的情况的解决方案，因此请您提供帮助。

尝试使用Google地址自动完成API。我使用asp.net核心。
在剃须刀中，我有：

@section Scripts{

<script src="~/scripts/common/google-location.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[Placed my key]&libraries=places"
    async defer></script>
}
<div id="subConstractorsModal" class="modal fade" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group modal-errors">
                        <div class="alert alert-danger">
                            <strong>Error!</strong>
                            <ul></ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row  default-row">
                <div class="col-md-6 name-box top-left">
                    <label class="control-label">Name</label>
                    <div>
                        <input type="text" placeholder="Name" class="form-control input-sm">
                    </div>
                </div>
                <div class="col-md-6 is-active-box top-right">
                    <label class="control-label">Active</label>
                    <div>
                        <input type="checkbox" class="form-control input-sm">
                    </div>
                </div>
            </div>
            <br />
            <div class="row  default-row">
                <div class="form-group col-md-12">
                    <div id="locationField">
                        <label>Address:</label>
                        <input class="form-control input-sm" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
                    </div>
                </div>
            </div>
            <div class="row  default-row">
                <div class="form-group col-md-1">
                    <label>Street Number:</label>
                    <input class="form-control input-sm" id="street_number" readonly />
                </div>
                <div class="form-group col-md-2">
                    <label>Street:</label>
                    <input class="form-control input-sm" id="route" readonly />
                </div>
                <div class="form-group col-md-2">
                    <label>City:</label>
                    <input class="form-control input-sm" id="locality" readonly />
                </div>
                <div class="form-group col-md-2">
                    <label>State:</label>
                    <input class="form-control input-sm" id="administrative_area_level_1" readonly />
                </div>
                <div class="form-group col-md-2">
                    <label>Post code:</label>
                    <input class="form-control input-sm" id="postal_code" readonly />
                </div>
                <div class="form-group col-md-2">
                    <label>Country:</label>
                    <input class="form-control input-sm" id="country" readonly />
                </div>
                <input type="hidden" id="longitude" />
                <input type="hidden" id="lattitude" />
            </div>


        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>

在我的js文件中，我有以下代码：

$(function() {

    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')), {
                types: ['geocode']
            });

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            //document.getElementById(component).disabled = false;
            $("#" + component).prop('readonly', false);
        }

        var location = place.geometry.location;
        var lattitude = location.lat();
        var longitude = location.lng();
        $("#lattitude").val(parseFloat(lattitude.toFixed(8)));
        $("#longitude").val(parseFloat(longitude.toFixed(8)));


        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                //autocomplete.setBounds(circle.getBounds());
            });
        }
    }
});

我有这个错误：Uncaught ReferenceError: geolocate is not defined

最佳答案

您的控件无法使用geolocate函数，因为它是在匿名作用域中定义的。尝试在geolocate之后的同一范围内将功能分配给焦点事件。

例如

...
...
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            //autocomplete.setBounds(circle.getBounds());
        });
    }
}
});

$("#autocomplete").focus(function() {
    geolocate();
});
...
...