Question

我有一个billing.php文件，我在其中使用自动完成功能进行地址输入。

所以我在选择地址后获得该位置的纬度经度。

现在我的任务是计算距离所选地址的距离以及从会话中获得的纬度和经度。

为此我需要创建一个PHP文件，它将计算距离并返回距离，在获得此距离后，我需要检查距离是否大于1 km，如果它更大，我需要显示一个复选框显示底部2小时交货。

现在我尝试创建一个calculateDistance函数和一个ajax函数。但是我不确定我是如何从java脚本函数调用它的纬度，经度变量都没用过，我觉得我没有传递参数正确的方法。

billing.php

<div class="margin_tb">

    <?php      session_start(); ?>

    <div class="main">
        <div class="bg_white">
            <form method="post" name="billing_frm" id="cart_form">
                <input type="hidden" name="command"/>
                <div align="center">

                    <h1 align="center">Billing Information</h1>

                    <table border="0" cellpadding="2px" width="50%">

                        <tr>
                            <td>Address:</td>

                            <td><input type="text" id="saddress1" name="sadd1" size="35" required/></td>
                        </tr>                           
</div>

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

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

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

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

<script>

    $(document).ready(function (e) {
            show_data(0);
        }
    );

    /*===========================================================
     To calculate distance
     ============================================================*/

     function calculateDistance(latitude,longitude,lat,long) {
    $("#cart_area").append('<div class="preloader"></div>');
    $.ajax
    ({
        url: "<?php echo 'http://views/cart/calculateDistance';?>",
        type: 'POST',
        data: { lat1: latitude,
            lat2 : lat,
            long1: longitude,
            long2: long
        },
        success: function (msg) {
            alert(msg);
        }
    });
}

calculateDistance.php

<?php




   $lat1 = $_POST['lat1'];
   $lat2 = $_POST['lat2'];
   $long1 = $_POST['long1'];
   $long2 = $_POST['long2'];

        $url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$lat1.",".$long1."&destinations=".$lat2.",".$long2."&sensor=false&units=metric&mode=driving";
        //$url = "http://maps.googleapis.com/maps/api/directions/json?origin=". $lat1." , ". $long1." &destination= ". $lat2.",". $long2."&sensor=false&units=metric&mode=driving";
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
        $response = curl_exec($ch);
        curl_close($ch);
        $response_a = json_decode($response, true);
        $dist = $response_a['rows'][0]['elements'][0]['distance']['text'];

        return $dist;

?>

我是javascript的初学者，php请帮帮忙。谢谢。

Answer 1

你指出是对的，你在ajax函数中传递了错误的参数，将代码更改为：

    function calculateDistance(latitude,longitude,lat,long) {
        $("#cart_area").append('<div class="preloader"></div>');
        $.ajax
        ({
            url: "<?php echo base_url('cart/calculateDistance');?>",
            type: 'POST',
            data: { lat1: latitude,
                lat2 : lat,
                long1: longitude,
                long2: long
            },
            success: function (msg) {
                alert(msg);
            }
        });
    }

我认为这是this的错误用法，试一试。要了解有关javaScript this的更多信息，请阅读you-dont-know-js-this--object-prototypes。

如何使用参数

1 个答案: