Google Maps API: Trouble with GDirections object literals
I am successfully calling GDirections to get a map with directions between a point A and point B that I have specified. However, I can't seem to get certain return values.
calculateDistanceFromRoute.js:
var map = new GMap2(document.getElementById("map_canvas"));
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
var route = new GDirections(map);
route.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
var distance = route.getDistance();
$("#dist").text(distance['html']);
$("#moar").text(route.getStatus().code);
$("#moar").append(route.getSummaryHtml());
}
}
mileage.htm:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="calculateDistanceFromRoute.js" type=开发者_StackOverflow社区"text/javascript"></script>
<script
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAcockAALI9IMRhHpfZzqs20rOLzZhRabMQb63ObuLzgNixJdxkMB1n4URRmY9m2gxwNKKyf2Dx5JWJ5dwyADQ"
type="text/javascript"></script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<p>The distance is <span id="dist">unknown</span></p>
<p id="stuff">here is some stuff</p>
<p id="moar"></p>
</body>
</html>
The only route call that works is route.load(). Everything else fails.
You need to subscribe to the load event for route since the loading of the route happens asynchronously. Here is the new initialize function with the load event:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
var route = new GDirections(map);
GEvent.addListener(route, "load", function() {
var distance = route.getDistance();
$("#dist").text(distance['html']);
$("#moar").text(route.getStatus().code);
$("#moar").append(route.getSummaryHtml());
});
route.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
}
加载中,请稍侯......
精彩评论