2015-10-17 89 views
0

我在查詢Google地圖地理編碼API的字符串。我在控制檯中看到一個返回,所以我知道我連接正確,但if語句中的內容返回「未定義」。任何想法,爲什麼會這樣?Google Maps API返回「未定義」

$(document).ready(function(){ 

     // Search Submit 
     $("#search").submit(function(event){ 
      event.preventDefault("", function(){ 
        // 
        }); 

      name = $("#search-name").val(); 
      console.log("Search term at submit is: "+name); 

      // Send to Google Geocoding API 

      var geocoder = new google.maps.Geocoder(); 

      geocoder.geocode({ 
         address : name 
        }, function(results, status){ 

         if (status == google.maps.GeocoderStatus.OK) { 

           console.log("results after query: "+ results.formatted_address + "\n" + results.length + " QTY Posts"); 
        } 

      ); 
     }); 
}); 

回答

3

結果是數組而不是對象。對於對象使用位置或使用foreach來讀取所有返回。

嘗試將results.formatted_address更改爲結果[0] .formatted_address。

var map; 
 
var addressField; 
 
var geocoder; 
 

 
$(document).ready(function() { 
 
    // Define map options 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(57.698254, 12.037024), 
 
     zoom: 16, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID, 
 
     panControl: true, 
 
     zoomControl: true, 
 
     mapTypeControl: true, 
 
     scaleControl: true, 
 
     streetViewControl: true, 
 
     overviewMapControl: true 
 
    }; 
 

 
    // Define map 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 

 
    // Define Gecoder 
 
    geocoder = new google.maps.Geocoder(); 
 

 
    // Init searchbox 
 
    initSearchBox(); 
 
}); 
 

 
function initSearchBox() { 
 
    // Add searchbox 
 
    var searchControlDiv = document.createElement('div'); 
 
    var searchControl = new SearchControl(searchControlDiv, map); 
 

 
    searchControlDiv.index = 1; 
 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(searchControlDiv); 
 
} 
 

 
function SearchControl(controlDiv, map) { 
 
    // Set CSS styles for the DIV containing the control 
 
    // Setting padding to 5 px will offset the control 
 
    // from the edge of the map. 
 
    controlDiv.style.padding = '5px'; 
 

 
    // Set CSS for the control border. 
 
    var controlUI = document.createElement('div'); 
 
    controlUI.style.backgroundColor = 'white'; 
 
    controlUI.style.borderStyle = 'solid'; 
 
    controlUI.style.borderWidth = '2px'; 
 
    controlUI.style.cursor = 'pointer'; 
 
    controlUI.style.textAlign = 'center'; 
 
    controlUI.title = 'Sök ex: gatunamn, stad'; 
 
    controlDiv.appendChild(controlUI); 
 

 
    // Create the search box 
 
    var controlSearchBox = document.createElement('input'); 
 
    controlSearchBox.id = 'search_address'; 
 
    controlSearchBox.size = '80'; 
 
    controlSearchBox.type = 'text'; 
 

 
    // Initiat autocomplete 
 
    $(function() { 
 
     $(controlSearchBox).autocomplete({ 
 
      source: function (request, response) { 
 

 
       if (geocoder == null) { 
 
        geocoder = new google.maps.Geocoder(); 
 
       } 
 

 
       geocoder.geocode({ 
 
        'address': request.term 
 
       }, function (results, status) { 
 
        if (status == google.maps.GeocoderStatus.OK) { 
 
         var searchLoc = results[0].geometry.location; 
 
         var lat = results[0].geometry.location.lat(); 
 
         var lng = results[0].geometry.location.lng(); 
 
         var latlng = new google.maps.LatLng(lat, lng); 
 
         var bounds = results[0].geometry.bounds; 
 
\t \t \t \t \t \t 
 
         console.log(results) 
 
         
 
         geocoder.geocode({ 
 
          'latLng': latlng 
 
         }, function (results1, status1) { 
 
          if (status1 == google.maps.GeocoderStatus.OK) { 
 
           if (results1[1]) { 
 
            response($.map(results1, function (loc) { 
 
             return { 
 
              label: loc.formatted_address, 
 
              value: loc.formatted_address, 
 
              bounds: loc.geometry.bounds 
 
             } 
 
            })); 
 
           } 
 
          } 
 
         }); 
 
        } 
 
       }); 
 
      }, 
 
      select: function (event, ui) { 
 
       var pos = ui.item.position; 
 
       var lct = ui.item.locType; 
 
       var bounds = ui.item.bounds; 
 

 
       if (bounds) { 
 
        map.fitBounds(bounds); 
 
       } 
 
      } 
 
     }); 
 
    }); 
 

 
    // Set CSS for the control interior. 
 
    var controlText = document.createElement('div'); 
 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
 
    controlText.style.fontSize = '12px'; 
 
    controlText.style.paddingLeft = '4px'; 
 
    controlText.style.paddingRight = '4px'; 
 
    controlText.appendChild(controlSearchBox); 
 
    controlUI.appendChild(controlText); 
 
}
html { 
 
    height: 100% 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#map_canvas { 
 
    height: 100% 
 
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="map_canvas" style="width:100%; height:100%;"></div>

相關問題