Javascript 获取api密钥java脚本的未捕获错误

在我的网页中，我想为用户输入的位置提供自动完成功能。 为此，我使用了一些函数来计算距离，对于静态值来说，它工作得很好

工作代码：

<script>


    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in the information.

    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">


    var 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(
            /** @type {!HTMLInputElement} */(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();

        var address = place.formatted_address;
        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();

        var mesg = "Address: " + address;
        mesg += "\nLatitude: " + latitude;
        mesg += "\nLongitude: " + longitude;
        alert(distance(latitude,longitude,"19.87845458","73.83670807","k"));

        distance(latitude,longitude,"19.87845458","73.83670807","k");


        for (var component in componentForm) {
            document.getElementById(component).value = componentForm.locality;
            document.getElementById(component).disabled = false;
        }

        // 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());
            });


        }
    }

    function distance(lat1, lon1, lat2, lon2, unit) {
        var radlat1 = Math.PI * lat1/180
        var radlat2 = Math.PI * lat2/180
        var theta = lon1-lon2
        var radtheta = Math.PI * theta/180
        var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
        dist = Math.acos(dist)
        dist = dist * 180/Math.PI
        dist = dist * 60 * 1.1515
        if (unit=="K") { dist = dist * 1.609344 }
        if (unit=="N") { dist = dist * 0.8684 }
        return dist
    }


</script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCP-j5J0xjTzFqTNoGCAxO_c46istGzHSA&libraries=places&callback=initAutocomplete"
    async defer></script>

此代码不起作用。我正在使用一个代码点火器框架。我不明白，请帮忙。谢谢

<script>

    var 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() {

        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        autocomplete.addListener('place_changed', fillInAddress);
    }

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

        var address = place.formatted_address;
        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();

        var mesg = "Address: " + address;
        mesg += "\nLatitude: " + latitude;
        mesg += "\nLongitude: " + longitude;

        <?php /*$store = $_SESSION['oneShop'];*/?>

        var myVariable = <?php /*echo(json_encode($_SESSION['oneShop'])); */?>;

        var lat = <?php /*echo(json_encode($_SESSION['store_latitude'])); */?>;

        var long = <?php /*echo(json_encode($_SESSION['store_longitude'])); */?>;

        alert (myVariable);

        if(myVariable === 0) {

          //  calculateDistance(latitude,longitude,lat,long);

        else
            {
                alert('Multiple shops');
            }


            for (var component in componentForm) {
            document.getElementById(component).value = componentForm.locality;
            document.getElementById(component).disabled = false;
        }


        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;
            }
        }

    }


    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());
            });

        }
    }


</script>
<script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCP-j5J0xjTzFqTNoGCAxO_c46istGzHSA&libraries=places&callback=initAutocomplete"
        async defer></script>

 js?key=AIzaSyCP-j5J0xjTzFqTNoGCAxO_c46istGzHSA&libraries=places&callback=initAutocomplete:98 Uncaught 
nc {message: "initAutocomplete is not a function", name: "InvalidValueError", stack: "Error↵    at new nc (https://maps.googleapis.com/m…libraries=places&callback=initAutocomplete:137:68"}