我正在研究一个简单的出租车费用计算程序，使用谷歌地图从谷歌地图获取路线。
所以这是代码：
HTML（map.php）
<html lang="en">
<head>
<title>Demo GPS plugin</title>
<style>
#map {
width: 500px;
height: 200px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=AIzaSyC7DlktbkGzLS0dvYqRJaGtbXG6mmoGUhA" type="text/javascript"></script>
<script type="text/javascript" src="gps.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#map").googleMap().load();
});
</script>
</head>
<body onunload="GUnload()">
<div id="directions"></div>
<div id="map"></div>
<form action="directions.php" method="post">
<p><b>From: </b><input id="start" type="text"/>
<b>To: </b><input id="end" type="text" /></p>
<input name="submit" id="getdirections" type="submit" value="Get Directions" />
</form>
</body>
</html>
JQUERY代码：
(function($) {
$.GoogleMapObjectDefaults = {
zoomLevel: 14,
imagewidth: 50,
imageheight: 50,
start: '#start',
end: '#end',
directions: 'directions',
submit: '#getdirections',
tooltip: 'false',
image: 'false'
};
function GoogleMapObject(elementId, options) {
/* private variables */
this._inited = false;
this._map = null;
this._geocoder = null;
/* Public properties */
this.ElementId = elementId;
this.Settings = $.extend({}, $.GoogleMapObjectDefaults, options || '');
}
$.extend(GoogleMapObject.prototype, {
init: function() {
if (!this._inited) {
if (GBrowserIsCompatible()) {
this._map = new GMap2(document.getElementById(this.ElementId));
this._map.addControl(new GSmallMapControl());
this._geocoder = new GClientGeocoder();
}
this._inited = true;
}
},
load: function() {
//ensure existence
this.init();
if (this._geocoder) {
//"this" will be in the wrong context for the callback
var zoom = this.Settings.zoomLevel;
var center = this.Settings.center;
var width = this.Settings.imagewidth;
var height = this.Settings.imageheight;
var map = this._map;
if (this.Settings.tooltip != 'false') {
var customtooltip = true;
var tooltipinfo = this.Settings.tooltip;
}
if (this.Settings.image != 'false') {
var customimage = true;
var imageurl = this.Settings.image;
}
this._geocoder.getLatLng(center, function(point) {
if (!point) { alert(center + " not found"); }
else {
//set center on the map
map.setCenter(point, zoom);
if (customimage == true) {
//add the marker
var customiconsize = new GSize(width, height);
var customicon = new GIcon(G_DEFAULT_ICON, imageurl);
customicon.iconSize = customiconsize;
var marker = new GMarker(point, { icon: customicon });
map.addOverlay(marker);
} else {
var marker = new GMarker(point);
map.addOverlay(marker);
}
if(customtooltip == true) {
marker.openInfoWindowHtml(tooltipinfo);
}
}
});
}
//make this available to the click element
$.data($(this.Settings.submit)[0], 'inst', this);
$(this.Settings.submit).click(function(e) {
e.preventDefault();
var obj = $.data(this, 'inst');
var outputto = obj.Settings.directions;
var from = $(obj.Settings.start).val();
var to = $(obj.Settings.end).val();
map.clearOverlays();
var gdir = new GDirections(map, document.getElementById(outputto));
gdir.load("from: " + from + " to: " + to);
//open the google window
//window.open("http://maps.google.com/maps?saddr=" + from + "&daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
});
return this;
}
});
$.extend($.fn, {
googleMap: function(options) {
// check if a map was already created
var mapInst = $.data(this[0], 'googleMap');
if (mapInst) {
return mapInst;
}
//create a new map instance
mapInst = new GoogleMapObject($(this).attr('id'), options);
$.data(this[0], 'googleMap', mapInst);
return mapInst;
}
});
})(jQuery);
用户将输入两个不同的位置（从和到）然后它将计算距离和时间..现在，我如何获得距离和时间的值，以便我可以用它来计算票价？。
感谢您的帮助。