0
我使用Google Maps JavaScript API和this solution獲取地圖上的最近點並顯示它們。谷歌地圖JavaScript API從另一個功能獲取緯度/經度，並推送到街景圖像API
function findClosestN(pt,numberOfResults) {
var closest = [];
for (var i=0; i<gmarkers.length;i++) {
gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt,gmarkers[i].getPosition());
gmarkers[i].setMap(null);
closest.push(gmarkers[i]);
}
closest.sort(sortByDist);
return closest;
}
function sortByDist(a,b) {
return (a.distance- b.distance)
}
function calculateDistances(pt,closest,numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i=0; i<closest.length; i++) request.destinations.push(closest[i].getPosition());
service.getDistanceMatrix(request, function (response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('search_results');
outputDiv.innerHTML = '';
photo_lat = closest[i].lat; // lat
photo_lng = closest[i].lng; // lng
profile_photo = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + photo_lat + "," + photo_lng + "&heading=151.78&pitch=-0.76";
var results = response.rows[0].elements;
for (var i = 0; i < numberOfResults; i++) {
closest[i].setMap(map);
outputDiv.innerHTML += "<div class='location_list' style='background:url(" + profile_photo + ");'>" + "<div class='inner'>" + "<a href='javascript:google.maps.event.trigger(closest["+i+"],\"click\");'>"+closest[i].title + '</a><br>' + closest[i].address+"<br>"
+ results[i].distance.text + ' appoximately '
+ results[i].duration.text
+ "</div></div>";
}
}
});
}
在calculateDistances方法，我現在想獲得的緯度和經度值，每個「最接近」的結果。然後，我想通過每個這些緯度/經度對進入街景圖像API來顯示每個位置的靜態街道視圖圖像：
photo_lat = closest[i].lat; // lat
photo_lng = closest[i].lng; // lng
最接近[I]不似乎是正確的目標雖然。我怎樣才能從方法內的每個「最接近」的結果中提取緯度/經度？
<style>
html {
\t height: 100%;
}
body {
\t height: 100%;
\t margin: 0;
\t padding: 0;
\t font-size: 26px;
font-family: "filson-soft";
}
#map_container {
height: 700px;
}
#map {
\t width: 80%;
\t height: 100%;
\t float: left;
}
#locations_list {
width: 20%;
height: 100%;
overflow-y: scroll;
float: left;
}
.location_list {
color: #ffffff;
height: 140px;
background-size: 100% !important;
background-position: center !important;
}
#search_results {
font-size: 14px;
}
#search_results .inner {
padding-left: 10px;
padding-right: 10px;
padding-top: 60px;
}
</style>
<div id="map_container">
<div id="map"></div>
<div id="locations_list">
<div id="search_results"></div>
</div>
</div>
<script>
google.maps.event.addDomListener(window, "load", initMap);
var geocoder;
var map;
var locations;
var gmarkers = [];
var closest = [];
var search_lat;
var search_lng;
var infowindow;
var directionsDisplay;
var directionsService;
function initMap() {
gmarkers = [];
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService;
geocoder = new google.maps.Geocoder();
// SET THE CENTER OF THE MAP
var theCenter = {
lat: 38.5803844,
lng: -121.50024189999999
};
// ADD THE MAP AND SET THE MAP OPTIONS
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: theCenter
});
locations = [
["Joes Parking Garage","1001 6th St","Sacramento","CA","95814","38.58205649","-121.49857521","parking_garage"],
["Mikes Parking Garage","918 5th St","Sacramento","CA","95814","38.5826939","-121.50012016","parking_garage"]
];
infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
console.log("found " + locations.length + " locations<br>");
for (i = 0; i < locations.length; i++) {
var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';
var coordStr = locations[i][5] + "," + locations[i][6];
var coords = coordStr.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
bounds.extend(pt);
var location_name = locations[i][0];
var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];
marker = new google.maps.Marker({
position: pt,
animation: google.maps.Animation.DROP,
icon: icon_image,
map: map,
title: location_name,
address: location_address
});
gmarkers.push(marker);
}
var address = "547 L St, Sacramento, CA 95814";
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
search_lat = results[0].geometry.location.lat();
search_lng = results[0].geometry.location.lng();
console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
closest = findClosestN(results[0].geometry.location,10);
// get driving distance
closest = closest.splice(0,10);
calculateDistances(results[0].geometry.location, closest,10);
//calculateAndDisplayRoute(directionsService, directionsDisplay);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function findClosestN(pt,numberOfResults) {
var closest = [];
//document.getElementById('info').innerHTML += "processing "+gmarkers.length+"<br>";
for (var i=0; i<gmarkers.length;i++) {
gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt,gmarkers[i].getPosition());
// document.getElementById('info').innerHTML += "process "+i+":"+gmarkers[i].getPosition().toUrlValue(6)+":"+gmarkers[i].distance.toFixed(2)+"<br>";
gmarkers[i].setMap(null);
closest.push(gmarkers[i]);
}
closest.sort(sortByDist);
return closest;
}
function sortByDist(a,b) {
return (a.distance- b.distance);
}
function calculateDistances(pt,closest,numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i=0; i<closest.length; i++) request.destinations.push(closest[i].getPosition());
service.getDistanceMatrix(request, function (response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('search_results');
outputDiv.innerHTML = '';
var results = response.rows[0].elements;
for (var i = 0; i < numberOfResults; i++) {
closest[i].setMap(map);
photo_lat = closest[i].getPosition().lat(); // lat
photo_lng = closest[i].getPosition().lng(); // lng
profile_photo = "https://maps.googleapis.com/maps/api/streetview?sensor=false&size=600x300&location=" + photo_lat + "," + photo_lng + "&heading=151.78&pitch=-0.76";
outputDiv.innerHTML += "<div class='location_list' style='background:url(" + profile_photo + ");'>" + "<div class='inner'>" + "<a href='javascript:google.maps.event.trigger(closest["+i+"],\"click\");'>"+closest[i].title + '</a><br>' + closest[i].address+"<br>"
+ results[i].distance.text + ' appoximately '
+ results[i].duration.text
+ "</div></div>";
}
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&callback=initMap"></script>
</body>
</html>
請提供一個[最小，完整，測試和可讀的示例]（http://stackoverflow.com/help/mcve），它演示了您正試圖解決的問題。 – geocodezip
@geocodezip這裏是你要求的最小，完整的測試和可讀的例子 – cpcdev