-1
我正在嘗試製作一個網站，使用google maps javascript API查找城市周圍的酒店，並比較每個酒店與用戶輸入位置之間的距離以便查找最接近他們想要參觀的所有地點的酒店。未捕獲TypeError：無法讀取未定義的屬性'lat'
首先它計算用戶輸入位置的座標（使用可正常工作的地理編碼API），然後獲取酒店的座標/谷歌地點信息。
使用google.maps.geometry.spherical.computeDistanceBetween（LatLng a，LatLng b）;讓每家酒店和用戶輸入的地址之間的距離，則函數返回該錯誤：
遺漏的類型錯誤：無法讀取屬性未定義
然而，二者的經緯度參數我通過「緯度」該函數似乎不是null或undefined。
每個if（location1！=「」），if（location2！=「」）等代碼塊檢查酒店或位置的LatLng對象是否爲null，如果它是，但是這些錯誤是當我運行網頁時在javascript控制檯中打印的而不是。
這裏是Javascript和HTML的問題：
\t \t \t
\t \t \t var map;
\t \t \t var infowindow;
\t \t \t function initMap() {
\t \t \t var pyrmont = {lat: -33.867, lng: 151.195};
\t \t \t map = new google.maps.Map(document.getElementById('map'), {
\t \t \t \t center: pyrmont,
\t \t \t \t zoom: 15
\t \t \t });
\t \t \t infowindow = new google.maps.InfoWindow();
\t \t \t }
\t \t \t
\t \t \t function createMarker(place) {
\t \t \t var placeLoc = place.geometry.location;
\t \t \t var marker = new google.maps.Marker({
\t \t \t \t map: map,
\t \t \t \t position: place.geometry.location
\t \t \t });
\t \t \t google.maps.event.addListener(marker, 'click', function() {
\t \t \t \t infowindow.setContent(place.name);
\t \t \t \t infowindow.open(map, this);
\t \t \t });
\t \t \t }
\t \t \t var nearbyHotels = [];
\t \t \t var cityCoordinates;
\t \t \t var cityCoordinatesLatLng;
\t \t \t function findHotels()
\t \t \t {
\t \t \t \t
\t \t \t \t var nearbyHotelsLat = [];
\t \t \t \t var nearbyHotelsLong = [];
\t \t \t \t
\t \t \t \t var locationScores1 = [];
\t \t \t \t var locationScores2 = [];
\t \t \t \t var locationScores3 = [];
\t \t \t \t var locationScores4 = [];
\t \t \t \t var locationScores5 = [];
\t \t \t \t
\t \t \t \t var avgScores = [];
\t \t \t \t var geocoder = new google.maps.Geocoder();
\t \t \t \t var cityAddress = document.getElementById('locations_cityField').value;
\t \t \t \t var radiusSearch = parseInt(document.getElementById('locations_rangeField').value);
\t \t \t \t
\t \t \t \t var location1 = document.getElementById('locations_location1').value;
\t \t \t \t var location2 = document.getElementById('locations_location2').value;
\t \t \t \t var location3 = document.getElementById('locations_location3').value;
\t \t \t \t var location4 = document.getElementById('locations_location4').value;
\t \t \t \t var location5 = document.getElementById('locations_location5').value;
\t \t \t \t
\t \t \t \t var location1LatLng;
\t \t \t \t var location2LatLng;
\t \t \t \t var location3LatLng;
\t \t \t \t var location4LatLng;
\t \t \t \t var location5LatLng;
\t \t \t \t
\t \t \t \t if(location1 != "" && location1 != undefined)
\t \t \t \t \t location1LatLng = geocodeAddress(geocoder, location1);
\t \t \t \t \t
\t \t \t \t if(location2 != "" && location2 != undefined)
\t \t \t \t \t location2LatLng = geocodeAddress(geocoder, location2);
\t \t \t \t \t
\t \t \t \t if(location3 != "" && location3 != undefined)
\t \t \t \t \t location3LatLng = geocodeAddress(geocoder, location3);
\t \t \t \t
\t \t \t \t if(location4 != "" && location4 != undefined)
\t \t \t \t \t location4LatLng = geocodeAddress(geocoder, location4);
\t \t \t \t \t
\t \t \t \t if(location5 != "" && location5 != undefined)
\t \t \t \t \t location5LatLng = geocodeAddress(geocoder, location5);
\t \t \t \t console.log(location1LatLng);
\t \t \t \t
\t \t \t \t var cityLoc = geocodeAddress(geocoder, cityAddress);
\t \t \t \t setTimeout(function(){
\t \t \t \t
\t \t \t \t \t
\t \t \t \t \t var coordSplit = cityCoordinates.split(",");
\t \t \t \t \t
\t \t \t \t \t var lati = parseFloat(coordSplit[0]);
\t \t \t \t \t var lngi = parseFloat(coordSplit[1]);
\t \t \t \t \t
\t \t \t \t \t var city = {lat: lati, lng: lngi};
\t \t \t \t \t
\t \t \t \t \t var service = new google.maps.places.PlacesService(map);
\t \t \t \t \t service.nearbySearch({
\t \t \t \t \t \t location: city,
\t \t \t \t \t \t radius: radiusSearch,
\t \t \t \t \t \t types: ['lodging']
\t \t \t \t \t }, callback);
\t \t \t \t \t
\t \t \t \t \t map.setCenter(cityLoc);
\t \t \t \t \t setTimeout(function(){
\t \t \t \t \t \t console.log("nearbyHotels.length: " + nearbyHotels.length);
\t \t \t \t \t \t if(location1 != "")
\t \t \t \t \t \t {
\t \t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t var hotelLatLng = nearbyHotels[i].geometry.location;
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t if(location1LatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL LOCATION1LATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t if(hotelLatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL (1) HOTELLATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t var dist = google.maps.geometry.spherical.computeDistanceBetween(location1LatLng, hotelLatLng);
\t \t \t \t \t \t \t \t locationScores1.push(dist);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t if(location2 != "")
\t \t \t \t \t \t {
\t \t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t var hotelLatLng = nearbyHotels[i].geometry.location;
\t \t \t \t \t \t \t \t if(location2LatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL LOCATION2LATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t if(hotelLatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL (2) HOTELLATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t var dist = google.maps.geometry.spherical.computeDistanceBetween(location2LatLng, hotelLatLng);
\t \t \t \t \t \t \t \t locationScores2.push(dist);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t if(location3 != "")
\t \t \t \t \t \t {
\t \t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t var hotelLatLng = nearbyHotels[i].geometry.location;
\t \t \t \t \t \t \t \t if(location3LatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL LOCATION3LATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t if(hotelLatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL (3) HOTELLATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t var dist = google.maps.geometry.spherical.computeDistanceBetween(location3LatLng, hotelLatLng);
\t \t \t \t \t \t \t \t locationScores3.push(dist);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t if(location4 != "")
\t \t \t \t \t \t {
\t \t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t var hotelLatLng = nearbyHotels[i].geometry.location;
\t \t \t \t \t \t \t \t if(location4LatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL LOCATION4LATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t if(hotelLatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL (4) HOTELLATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t var dist = google.maps.geometry.spherical.computeDistanceBetween(location4LatLng, hotelLatLng);
\t \t \t \t \t \t \t \t locationScores4.push(dist);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t if(location5 != "")
\t \t \t \t \t \t {
\t \t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t var hotelLatLng = nearbyHotels[i].geometry.location;
\t \t \t \t \t \t \t \t if(location5LatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL LOCATION5LATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t if(hotelLatLng == "")
\t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t console.log("NULL (5) HOTELLATLNG");
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t var dist = google.maps.geometry.spherical.computeDistanceBetween(location5LatLng, hotelLatLng);
\t \t \t \t \t \t \t \t locationScores5.push(dist);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t
\t \t \t \t \t \t for(var i = 0; i < nearbyHotels.length; i++)
\t \t \t \t \t \t {
\t \t \t \t \t \t \t var avgDist;
\t \t \t \t \t \t \t var numLocations = 0;
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t if(location1 != "")
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t numLocations++;
\t \t \t \t \t \t \t \t avgDist += locationScores1[i];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t if(location2 != "")
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t numLocations++;
\t \t \t \t \t \t \t \t avgDist += locationScores2[i];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t if(location3 != "")
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t numLocations++;
\t \t \t \t \t \t \t \t avgDist += locationScores3[i];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t if(location4 != "")
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t numLocations++;
\t \t \t \t \t \t \t \t avgDist += locationScores4[i];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t if(location5 != "")
\t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t numLocations++;
\t \t \t \t \t \t \t \t avgDist += locationScores5[i];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t avgDist = avgDist/numLocations;
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t avgScores.push(avgDist);
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t }
\t \t \t \t \t \t var avgScoresSorted = avgScores.sort(function (a, b) {
\t \t \t \t \t \t \t \t return b - a;
\t \t \t \t \t \t \t });
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t for(var i = 0; i < avgScoresSorted.length; i++)
\t \t \t \t \t \t {
\t \t \t \t \t \t \t var index = avgScores.indexOf(avgScoresSorted[i]);
\t \t \t \t \t \t \t var hotelName = nearbyHotels[index].name;
\t \t \t \t \t \t \t var hotelAddress = nearbyHotels[index].vicinity;
\t \t \t \t \t \t \t document.getElementById("displayHotelsDiv").innerHTML += (i + 1) + ": " + hotelName + " (" + hotelAddress + ") - LocationScore: " + avgScoresSorted[i];
\t \t \t \t \t \t }
\t \t \t \t \t }, 10000);
\t \t \t \t \t
\t \t \t \t }, 5000);
\t \t \t \t
\t \t \t \t
\t \t \t
\t \t \t }
\t \t \t
\t \t \t function callback(results, status) {
\t \t \t if (status === google.maps.places.PlacesServiceStatus.OK) {
\t \t \t \t for (var i = 0; i < results.length; i++) {
\t \t \t \t console.log(results[i]);
\t \t \t \t createMarker(results[i]);
\t \t \t \t nearbyHotels.push(results[i]);
\t \t \t \t }
\t \t \t }
\t \t \t }
\t \t \t
\t \t \t function initSearchButtonListener()
\t \t \t {
\t \t \t \t
\t \t \t \t
\t \t \t \t document.getElementById('button_searchhotels').addEventListener('click', function() {
\t \t \t \t \t findHotels();
\t \t \t \t });
\t \t \t \t
\t \t \t \t initMap();
\t \t \t }
\t \t \t
\t \t \t
\t \t \t function geocodeAddress(geocoder, address) {
\t \t \t \t console.log("address " + address);
\t \t \t \t console.log("geocoder " + geocoder);
\t \t \t geocoder.geocode({'address': address}, function(results, status) {
\t \t \t \t if (status === google.maps.GeocoderStatus.OK) {
\t \t \t \t \t var coords = results[0].geometry.location.toString();
\t \t \t \t \t console.log("CoordsRaw: " + coords)
\t \t \t \t \t var coordsNoFirst = coords.substring(1);
\t \t \t \t \t var coordsNoLast = coordsNoFirst.slice(0, -1);
\t \t \t \t \t cityCoordinates = coordsNoLast;
\t \t \t \t \t console.log(cityCoordinates);
\t \t \t \t \t
\t \t \t \t \t return results[0].geometry.location;
\t \t \t \t \t
\t \t \t \t } else {
\t \t \t \t alert('Could not convert an address to latitude/longitude for the google maps API: ' + status);
\t \t \t \t }
\t \t \t });
\t \t \t }
\t \t
\t \t \t
\t \t \t
\t \t \t
\t \t並與它一起去的HTML：
<div class="container" id="locations">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <input type="text" class="form-control" id="locations_location1" placeholder="Enter address of the 1st location">
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t <input type="text" class="form-control" id="locations_location2" placeholder="Enter address of the 2nd location">
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t <br></br>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <input type="text" class="form-control" id="locations_location3" placeholder="Enter address of the 3rd location">
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t <input type="text" class="form-control" id="locations_location4" placeholder="Enter address of the 4th location">
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t <br></br>
\t \t \t <div class="row" style="text-align:center">
\t \t \t \t
\t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t <input type="text" class="form-control" id="locations_location5" placeholder="Enter address of the 5th location">
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t <br></br>
\t \t \t \t <div class="row">
\t \t \t \t \t <div id="locationField">
\t \t \t \t \t <input type="text" class="form-control" id="locations_cityField" placeholder="Enter a city" type="text" />
\t \t \t \t </div>
\t \t \t \t \t <div id="rangeField">
\t \t \t \t \t <input type="text" class="form-control" id="locations_rangeField" placeholder="Enter a search radius in meters (from the city center)" type="text" />
\t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div style="text-align:center">
\t \t \t \t \t <div id="map" style="width: 800px; height: 400px;"></div>
\t \t \t \t </div>
\t \t \t <button id="button_searchhotels" class="btn btn-success btn-lg">Search</button>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVVnR7yKErwMDd6yC-GzVpRXFvNTtoKhQ&signed_in=true&libraries=places,geometry&callback=initSearchButtonListener"
\t \t async defer></script>
也許你能帶我們去哪兒在300行代碼發生錯誤？ – adeneo
請提供一個[最小，完整，已測試和可讀的示例]（http://stackoverflow.com/help/mcve），說明您的問題。 – geocodezip
[如何從異步調用返回響應？]（http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） – geocodezip