我目前正在为大学任务制作应用程序。我正在使用谷歌地图放置api和gmaps.js。
我想要做的是让用户搜索地点并将结果显示在一个简单的列表中（我已经开始工作）但我想计算每个搜索结果的距离，这是一种工作方式（我想！）但我不知道如何让它显示我想要的东西，例如：
它现在正在做的是计算距离，但所有值都设置在所有搜索结果旁边，而不是彼此相邻。在一行（所有聚集在一起）。
（必须删除发布新链接的链接）
我不知道如何拆分它们或从一开始就干净利落地做。我认为问题在于使用“google.maps.DistanceMatrixService”计算距离的函数。
var origin = currentLocation;
var destination = place.geometry.location;
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.WALKING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, getDistance);
function getDistance(response, status) {
if (status == "OK") {
var distance = response.rows[0].elements[0].distance.text;
console.log(distance);
$(".distance").append(distance);
} else {
return false;
console.log(response + status)
}
}
getDistance();
这句话是我最好的猜测：
response.rows[0].elements[0].distance.text;
但我很遗憾，我认为需要使用循环输出？
我的搜索请求的完整代码：
$("#place-search").submit(function(e){
e.stopPropagation(); e.preventDefault();
var query = $("#place-query").val();
map.addLayer("places", {
location: cheltenham, //new google.maps.LatLng(51.902707,-2.073361),
radius: 500, //experiment with the distance (in metres)
query: query,
opennow: true,
textSearch: function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
$(".results-list").html(""); //remove previous results
removeMarkers(); //remove previous markers
var bounds = new google.maps.LatLngBounds();
//console.log(bounds);
//I think if we set i to say 10, it will limit the search results - by default the places api returns 20 result sets
for (var i = 0; i < results.length; i++) {
//console.log(i);
var place = results[i];
var image = { //set to better sizes and positions (icons from search results)
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
/* ---------- */
var origin = currentLocation; //new google.maps.LatLng(51.902707,-2.073361);
var destination = place.geometry.location; //new google.maps.LatLng(51.899464, -2.074641);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.WALKING, //this needs to be a choice
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, getDistance);
function getDistance(response, status) {
if (status == "OK") {
var distance = response.rows[0].elements[0].distance.text; //the one I need
console.log(distance);
$(".distance").append(distance);
} else {
return false;
console.log(response + status)
}
}
getDistance();
/* ---------- */
map.addMarker({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
icon: image,
animation: google.maps.Animation.DROP,
title: place.name,
//we need to style and build these better - ideas? should be simple I think, Name + Location + Image
infoWindow: {
content: '<h2>'+place.name+'</h2>' + '<p>Rating: '+place.rating+'</p>' + '<p>'+(place.vicinity ? place.vicinity : place.formatted_address)+'</p><img src="'+place.icon+'"" width="100"/>'
}
});
bounds.extend(place.geometry.location);
$(".results-list").append("<li>" + place.name + "<span class=\"distance\"></span></li>");
}
map.fitBounds(bounds); //fit to the new bounds
}//end if search OK
}
});
});
任何帮助或指示将不胜感激！链接到我目前为止：http://martinsherwood.co.uk/visitcheltenham/
更新
我已经尝试将使用jQuery将项目放入列表的行移动到函数getDistance（）中，最终将距离与地名放在一起，但是对于计算的每个距离都是相同的地名。这是搜索的最后结果。
getDistance的（）
function getDistance(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
$(".results-list").append("<li><span class=\"name\">" + place.name + "</span>" + distance + "</li>")
}
}
} else {
return false;
console.log(response + status)
}
}
输出结果如下：http://i.imgur.com/FSCMMzF.png
感谢所有到目前为止看过的人！
