Javascript 使用谷歌地图的价格计算器

嗨，我有一个价格计算器，它根据距离计算价格。但如果地点在伦敦市中心，我想再加上11.50英镑的费用

正在使用的计算器：

下面是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);

//全局映射变量；
$（窗口）.ready（函数（）{
初始化（）；
$（'#calculateform.submitbtn'）。在({
单击：获取价格和距离
});    
});
函数getPriceAndDistance（事件）{
event.preventDefault（）；
//验证输入
var状态=1；
变量形式=$（“#calculateform”）；
var validatable=form.find（'input'）；
可验证。每个（函数（）{
elem=$（本）；
$（elem）.removeClass（'invalid'）；
if（元素值（）长度<2）{
$（elem）.addClass（'invalid'）；
状态=0；
}
})
//做实际的事情
如果（状态==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选项：selected'）.val（）；
var travelModeText=form.find（“#travelMode选项：选定”）.text（）；
var price=Number（form.find（'#travelMode选项：selected'）.attr（'price'））.valueOf（）；
var err=''；
var位置从；
var locationTo；
$（'#地图画布'）.html（''）；
变量映射选项={
中心：新google.maps.LatLng（55.378051，-3.435979999），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
$（form）.find（'p.msg'）.remove（）；
$（form）.find（'p.load'）.remove（）；
加载='
加载请稍候…；
$（表格）。追加（加载）；
//启动gecoder
geocoder=新的google.maps.geocoder（）；
if（地理编码器）
{
geocoder.geocode（{'address'：from}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
locationFrom=结果[0]。geometry.location；
如果（位置从）
{
geocoder.geocode（{'address'：to}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
locationTo=结果[0]。geometry.location；
如果（位置到）{
updateMap（）；
}
否则{
错误='
未找到目标位置。；
$（表格）。追加（错误）；
}
}
否则{
$（表单）.find（'.loading'）.remove（）；
错误='
地理编码失败，原因如下“+status+”。；
$（表格）。追加（错误）；
}
});
}
否则{
err='
未找到起始位置。；
$（表格）。追加（错误）；
}
}
否则{
//错误='
地理编码失败，原因如下“+status+”。；
err='
很抱歉，似乎出现了一些问题。；
errmsg='
请检查您输入的位置，然后重试。；
$（表格）。追加（错误）；
$（表格）.append（errmsg）；
}
});
函数updateMap（）
{
latlngCen=new google.maps.LatLng（（locationFrom.lat（）+locationTo.lat（））/2，（locationFrom.lng（）+locationTo.lng（））/2）；
潘托地图（拉特朗肯）；
map.setZoom（1）；
directionsService=new google.maps.directionsService（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
var req={
来源：地点来源：，
目的地：地点
}
如果（travelMode=='driving'）
{
req.travelMode=google.maps.directions travelMode.DRIVING；
}
否则如果（travelMode=='transit'）
{
req.travelMode=google.maps.directions travelMode.TRANSIT；
}
路由（请求、功能（响应、状态）{
如果（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
if（response.routes[0]。legs[0]。距离）{
console.log（'here'）；
var d=response.routes[0]。legs[0]。distance.value/1609；
var estTotal=d*价格；
$（表单）.find（'.loading'）.remove（）；
dText=“从+”到+”之间的距离是“+d.toFixed（2）+“miles”；
pText=“通过“+travelModeText+”估算的价格为£；“+estTotal.toFixed（2）+””；
$（form）.prepend（“
”+pText+”。
”）；
$（form）.prepend（“
”+dText+”。
”）；
$（'html，body'）。设置动画({
滚动顶端：240
}, 200);
}
否则{
$（表单）.find（'.loading'）.remove（）；
err='
很抱歉出现了一些问题。您可以与我们联系。
'
$（表格）。追加（错误）；
}
}
});
}
}
}
};
享乐
<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>