当前的JavaScript:
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null;
var service = null;
var gmarkers = [];
var infowindow = new google.maps.InfoWindow();
var promises = [];
function MyPromise() {
return this;
};
MyPromise.prototype.promise = function () {
var p = promises[this] || {
then: []
};
promises[this] = p;
return this;
};
MyPromise.prototype.then = function (func) {
this.promise();
promises[this].then.push(func);
return this;
};
MyPromise.prototype.resolve = function () {
this.promise();
var then = promises[this].then;
for (var promise in then) {
then[promise].apply(this, arguments);
}
return this;
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40, -80.5),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
service = new google.maps.places.PlacesService(map);
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
}
function route() {
var dfd = new MyPromise().promise();
clearBoxes();
distance = parseFloat(document.getElementById("distance").value) * 1.609344;
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
drawBoxes(boxes);
$.search(boxes, 0).then(function (p) {
console.log("done", p);
}).then(dfd.resolve);
} else {
alert("Directions query failed: " + status);
}
});
return dfd;
}
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
map: map
});
}
}
$.search = function findPlaces(boxes, searchIndex) {
var dfd = new MyPromise().promise();
var request = {
bounds: boxes[searchIndex],
types: ["food"]
};
window.place_Results = [];
service.radarSearch(request, function (results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert("Request[" + searchIndex + "] failed: " + status);
return;
}
document.getElementById('side_bar').innerHTML += "bounds[" + searchIndex + "] returns " + results.length + " results<br>"
for (var i = 0, result; result = results[i]; i++) {
var marker = createMarker(result);
place_Results.push(result.reference);
}
searchIndex++;
if (searchIndex < boxes.length) findPlaces(boxes, searchIndex);
if (place_Results.length > 0) {
dfd.resolve(place_Results);
}
});
return dfd;
}
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}
function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.icon) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
} else var image = null;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var request = {
reference: place.reference
};
google.maps.event.addListener(marker, 'click', function () {
service.getDetails(request, function (place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address;
if ( !! place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number;
if ( !! place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>';
contentStr += '<br>' + place.types + '</p>';
infowindow.setContent(contentStr);
infowindow.open(map, marker);
} else {
var contentStr = "<h5>No Result, status=" + status + "</h5>";
infowindow.setContent(contentStr);
infowindow.open(map, marker);
}
});
});
gmarkers.push(marker);
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}
initialize();
document.getElementById('route').onclick = route;
请访问http://jsfiddle.net/zsKnK/7/以查看完整的可用文档。
.notify(...)
触发延迟对象的 "progress" 回调。如果你想触发延迟对象的 "done" 回调,那么请使用.resolve(...)
。 - Shai