自动完成地址表单不起作用

时间：2016-12-17 18:10:36

标签： google-maps

我使用google maps api autocomplete创建了一个地址搜索表单。我有一个自动完成的搜索框，然后填写表单中的详细信息。表单的街道地址部分包含street_number和route。我的问题是，当搜索到的地址不包含街道号码时，它不会填写表格中的任何结果。

示例地址为：8040 Admiral Ct，Glenview，IL

＆＃13;
＆＃13; 
<script src="external/jquery/jquery.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD20rCPvXwqQHXnv6sX4UaP6KwEipbZecM&libraries=places"></script>


<script type="text/javascript">
var sourceElement,source;
var latitude, longitude, res, marker;
var directionsService;

function initialize() {
source = sourceElement.value;

google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }




});

if(source != "")
{
 eocoder.geocode({ 'address': source }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
   latitude = results[0].geometry.location.lat();
   longitude = results[0].geometry.location.lng();
          res = results[0];
           showMap();
           if (res != null)
            {
                  marker = new google.maps.Marker({
    map: map,
    position: res.geometry.location,
    title:res.formatted_address
    });
              }
 } 
 });
}
else {
    latitude = 41.8781;
    longitude =  -87.6298;
showMap();
}
$('.pac-container').css('z-index', '5005 !important');
}

  //=================
function populatePlaceDetials(place,strElement,cityElement,stateElement,zipElement)
{
var streetAddress;
     var city;
     var state;
     var zip_code;
      if (place.address_components) {
       address = [
         (place.address_components[0] && place.address_components[1].short_name || ''),
         (place.address_components[1] && place.address_components[1].short_name || ''),
         (place.address_components[2] && place.address_components[2].short_name || '')
       ].join(' ');
       for (var i=0; i<place.address_components.length;i++)
       {
         for (var j=0;j<place.address_components[i].types.length;j++)
         {
        if (place.address_components[i].types[j] == "street_number")
        {
          streetAddress = place.address_components[i].long_name;                   
        }
        if (place.address_components[i].types[j] == "route")
        {
          streetAddress += (streetAddress.length !=0)?' ' + place.address_components[i].short_name : place.address_components[i].short_name;
strElement.value=streetAddress;
        }
        if (place.address_components[i].types[j] == "locality")
        {
          city = place.address_components[i].long_name;
         cityElement.value= city;
        }
        if (place.address_components[i].types[j] == "administrative_area_level_1")
        {
          state = place.address_components[i].short_name;          
stateElement.value= state;
        }         
        if (place.address_components[i].types[j] == "postal_code")
        {
          zip_code = place.address_components[i].long_name;
          zipElement.value=zip_code;
          //alert("zip code- " + zip_code);
        }
         }
       }
        }
}


window.onload=function(){
sourceElement = document.getElementById("cbParamVirtual1");
source = sourceElement.value;



var autocomplete = new google.maps.places.Autocomplete(sourceElement);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }
pickStr = document.getElementById("InsertRecordPICKUP_STREET_ADDRESS");
pickCity = document.getElementById("InsertRecordPICKUP_CITY");
pickState = document.getElementById("InsertRecordPICKUP_STATE");
pickZip = document.getElementById("InsertRecordPICKUP_ZIP");
populatePlaceDetials(place,pickStr,pickCity,pickState,pickZip);
});

}


</script>
＆＃13; 
<input type='text' id='cbParamVirtual1' placeholder='Search'>
<br />
<br />

<input type='text' id='InsertRecordPICKUP_STREET_ADDRESS' placeholder='Pick-Up Street Address'>
<br />
<input type='text' id='InsertRecordPICKUP_CITY' placeholder='Pick-Up City'>
<br />
<input type='text' id='InsertRecordPICKUP_STATE' placeholder='Pick-Up State'>
<br />
<input type='text' id='InsertRecordPICKUP_ZIP' placeholder='Pick-Up Zip'>
<br />
<br />
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

streetAddress为undefined

时出现语法错误 
streetAddress += (streetAddress.length !=0)?' ' + place.address_components[i].short_name : place.address_components[i].short_name;
strElement.value=streetAddress;

当没有＆＃34; street_number＆＃34; （或者如果＆＃34; street_number＆＃34;出现在列表的后面。

防御性代码（请注意，如果列表的顺序发生变化，仍会出现问题）：

    if (place.address_components[i].types[j] == "street_number") {
      streetAddress = place.address_components[i].long_name;
    }
    if (place.address_components[i].types[j] == "route") {
      if (streetAddress) {
        streetAddress += (streetAddress.length != 0) ? ' ' + place.address_components[i].short_name : place.address_components[i].short_name;
        strElement.value = streetAddress;
      }
    }

proof of concept fiddle

代码段

＆＃13;
＆＃13; 
var sourceElement, source;
var latitude, longitude, res, marker;
var directionsService;

function initialize() {
  source = sourceElement.value;

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }




  });

  if (source != "") {
    eocoder.geocode({
      'address': source
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        latitude = results[0].geometry.location.lat();
        longitude = results[0].geometry.location.lng();
        res = results[0];
        showMap();
        if (res != null) {
          marker = new google.maps.Marker({
            map: map,
            position: res.geometry.location,
            title: res.formatted_address
          });
        }
      }
    });
  } else {
    latitude = 41.8781;
    longitude = -87.6298;
    showMap();
  }
  $('.pac-container').css('z-index', '5005 !important');
}

//=================
function populatePlaceDetials(place, strElement, cityElement, stateElement, zipElement) {
  console.log(place);

  var streetAddress;
  var city;
  var state;
  var zip_code;
  if (place.address_components) {
    address = [
      (place.address_components[0] && place.address_components[1].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
    ].join(' ');

    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "street_number") {
          streetAddress = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[j] == "route") {
          if (streetAddress) {
            streetAddress += (streetAddress.length != 0) ? ' ' + place.address_components[i].short_name : place.address_components[i].short_name;
            strElement.value = streetAddress;
          }
        }
        if (place.address_components[i].types[j] == "locality") {
          city = place.address_components[i].long_name;
          cityElement.value = city;
        }
        if (place.address_components[i].types[j] == "administrative_area_level_1") {
          state = place.address_components[i].short_name;
          stateElement.value = state;
        }
        if (place.address_components[i].types[j] == "postal_code") {
          zip_code = place.address_components[i].long_name;
          zipElement.value = zip_code;
          //alert("zip code- " + zip_code);
        }
      }
    }
  }
}


window.onload = function() {
  sourceElement = document.getElementById("cbParamVirtual1");
  source = sourceElement.value;



  var autocomplete = new google.maps.places.Autocomplete(sourceElement);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }
    pickStr = document.getElementById("InsertRecordPICKUP_STREET_ADDRESS");
    pickCity = document.getElementById("InsertRecordPICKUP_CITY");
    pickState = document.getElementById("InsertRecordPICKUP_STATE");
    pickZip = document.getElementById("InsertRecordPICKUP_ZIP");
    populatePlaceDetials(place, pickStr, pickCity, pickState, pickZip);
  });

}
＆＃13; 
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input type='text' id='cbParamVirtual1' placeholder='Search' value="8040 Admiral Ct, Glenview, IL">
<br />
<br />

<input type='text' id='InsertRecordPICKUP_STREET_ADDRESS' placeholder='Pick-Up Street Address'>
<br />
<input type='text' id='InsertRecordPICKUP_CITY' placeholder='Pick-Up City'>
<br />
<input type='text' id='InsertRecordPICKUP_STATE' placeholder='Pick-Up State'>
<br />
<input type='text' id='InsertRecordPICKUP_ZIP' placeholder='Pick-Up Zip'>
<br />
<br />
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题