使用谷歌地圖的價格計算器

Question

嗨，我有這個價格計算器，可以根據距離計算價格。 但如果位置在倫敦市中心，我希望額外支付11.50英鎊的費用。

使用的計算器： http : //unicornlogistics.com/price-calculator

這是js代碼：

//global map variable;
$(window).ready(function () {
initialize();
$('#calculateform .submitbtn').on({
    click: getPriceAndDistance
});    
});

function getPriceAndDistance(event) { 
event.preventDefault();

//validating Input
var state = 1;
var form = $('#calculateform');
var validateable = form.find('input');
validateable.each(function () {
    elem = $(this);
    $(elem).removeClass('invalid');
    if (elem.val().length < 2) {
        $(elem).addClass('invalid');
        state = 0;
    }
})

//doing the actual stuff
if(state == 1)
{
    var from = form.find('#from').val().trim().replace(/[^a-z0-9\s]/gi, '');
    var to = form.find('#to').val().trim().replace(/[^a-z0-9\s]/gi, '');
    var travelMode = form.find('#travelMode option:selected').val();
    var travelModeText = form.find('#travelMode option:selected').text();
    var price = Number(form.find('#travelMode option:selected').attr('price')).valueOf();

    var err = '';
    var locationFrom;
    var locationTo;


    $('#map-canvas').html('');                
    var mapOptions = {
        center: new google.maps.LatLng(55.378051, -3.43597299999999),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    $(form).find('p.msg').remove();
    $(form).find('p.loading').remove();
    loading = '<p class="loading">Loading Please Wait...<p>';
    $(form).append(loading);


    //initiate gecoder
    geocoder = new google.maps.Geocoder();

    if(geocoder)
    {


        geocoder.geocode({ 'address': from }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                locationFrom = results[0].geometry.location;
                if (locationFrom) 
                {
                    geocoder.geocode({ 'address': to }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                            locationTo = results[0].geometry.location;
                            if (locationTo) {
                                updateMap();
                            }
                            else {
                                err = '<p class="invalid msg">Destination location is not found.<p>';
                                $(form).append(err);                        
                            }

                        }
                        else {
                            $(form).find('.loading').remove();
                            err = '<p class="invalid msg">Geocoding failed due to following reasons ' + status + '.<p>';
                            $(form).append(err);
                        }
                    });

                }
                else{
                    err = '<p class="invalid msg">Starting location is not found.<p>';
                    $(form).append(err);                        
                }
            }
            else {
                //err = '<p class="invalid msg">Geocoding failed due to following reasons ' + status + '.<p>';
                err = '<p class="invalid msg">Sorry there seems to be some problem.<p>';
                errmsg = '<p class="invalid msg">Please check the location that you entered and try again.<p>';
                $(form).append(err);
                $(form).append(errmsg);
            }
        });




        function updateMap()
        {

            latlngCen = new google.maps.LatLng((locationFrom.lat()+locationTo.lat())/2,(locationFrom.lng()+locationTo.lng())/2);                
            map.panTo(latlngCen);
            map.setZoom(1);

            directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();                
            directionsDisplay.setMap(map);

            var req = {
                origin:locationFrom,
                destination:locationTo
            }
            if (travelMode == 'driving')
            {
                req.travelMode = google.maps.DirectionsTravelMode.DRIVING;
            }
            else if (travelMode == 'transit')
            {
                req.travelMode = google.maps.DirectionsTravelMode.TRANSIT;
            }

            directionsService.route(req, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {                        
                    directionsDisplay.setDirections(response);
                    if (response.routes[0].legs[0].distance) {
                        console.log('here');
                        var d = response.routes[0].legs[0].distance.value / 1609;

                        var estTotal = d * price;

                        $(form).find('.loading').remove();
                        dText = "The distance between <strong>" + from + "</strong> and <strong>" + to + "</strong> is <strong>" + d.toFixed(2) + " miles</strong>";
                        pText = "The estimated price via <strong>" + travelModeText + "</strong> is <strong>&#163; " + estTotal.toFixed(2) + "</strong>";
                        $(form).prepend('<p class="valid msg">' + pText + '.</p>');
                        $(form).prepend('<p class="valid msg">' + dText + '.</p>');

                        $('html, body').animate({
                            scrollTop: 240
                        }, 200);

                    }
                    else {
                        $(form).find('.loading').remove();
                        err = '<p class="invalid msg">Sorry there seems to be some problem. You can contact us <a href="contact.html">here</a>.</p>'
                        $(form).append(err);
                    }
                }
            });



        }

    }
}


};

function initialize() {
// declaring map variable;
var mapOptions = {
  center: new google.maps.LatLng(55.378051, -3.43597299999999),
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map;
map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
};

//google.maps.event.addDomListener(window, 'load', initialize);

這是html代碼：

<div id="map-holder">
<div class="container">
    <div id="map-canvas"></div>
</div>
</div>

<div id="main">
<div class="container">
    <div class="maintext">
        <h2>Instant Quote for Same Day deliveries Across UK mainland</h2>
    </div>
    <div id="calculateform" class="form">
        <p>Use the following form to calculate the estimated travel distance and price     for your courier.</p>
        <p class="instructions">You may search by Postcode,Street and/or City.
            <br/>For Example: 10 Downing Street.
        </p>
        <form>
            <p class="label">From</p>
            <input id="from" class="" type="text" name="from">

            <p class="label">To</p>
            <input id="to" class="" type="text" name="to">

            <p class="label">Mode of Transport</p>
            <select id="travelMode">
                <option value="driving" price=".80">Bike/Car</option>
                <option value="driving" price=".85">Small Van</option>
                <option value="driving" price=".95">Medium Van</option>
                <option value="driving" price="1.05">Large Van</option>
                <option value="driving" price="1.15">Extra Large Van</option>
            </select>

            <div class="clearfix"></div>
            <input class="submitbtn" type="submit" value="Submit" />
        </form>
    </div>
</div>
</div>

Answer 1

如果您查詢倫敦，則地理編碼器將始終返回相同的坐標 ，因此您可以將其標記為向下 ，然后將查詢中的新坐標 與 保存的坐標 進行比較 。 如果它們匹配，則會增加成本。