隐藏显示城市和状态，当邮编填充

javascript：我想显示城市和州填写邮政编码时。我有地理位置工作，但现在我只想要城市和州显示邮政填充时在隐藏显示城市和状态，当邮编填充

这是我的HTML：

<label for="city">City</label> 
<input size="20" placeholder="Town or City" name="city" id="city" type="text"> 
      <br> 
<label for="state">State</label> 
<input size="10" placeholder="State/Province" name="state" id="state" type="text">

这是我的JavaScript：

zip.addEventListener("change", getGeo); 

function getGeo(e){ 

// make an send an XmlHttpRequest 
var x = new XMLHttpRequest(); 
x.open("GET","http://maps.googleapis.com/maps/api/geocode/json?address="+this.value,true); 
x.send(); 

// set up a listener for the response 
x.onreadystatechange=function(){ 
    if (this.readyState==4 && this.status==200){ 

    var c = JSON.parse(this.response).results[0].address_components[1].long_name; 
    //alert(c); 
    var s = JSON.parse(this.response).results[0].address_components[2].short_name; 
     //alert(s); 
     if (c) { 
      city.value = c; 
     } 
     if (s) { 
      state.value = s; 
     } 

     //document.getElementById("output").innerHTML = o; 
     var l = JSON.parse(this.response).results[0].geometry.location; 
     if (l.lat) { 
      lat.value = l.lat; 
     } 
     if (l.lng) { 
      lon.value = l.lng; 
     } 

    } 
} 
}

这一切都在这的jsfiddle http://jsfiddle.net/lakenney/gad7ntgk/

来源

2015-05-10 LucyK

目前还不清楚你在问什么。从地理编码请求返回时，您是否想要显示city + state字段？ –

为什么你json解析响应多次？将解析结果存储一次......效率更高 – charlietfl

看起来你已经有了一个良好开始，但这个例子可能会有所帮助。运行代码片段并输入邮政编码或城市名称。我保持它很简单，但你可以检查数据数组的长度。当等于1时，你有一个匹配，并可以在页面上显示地理位置和其他内容。

请记住，你正在做一个跨域AJAX调用......这将失败在IE < 10.如果你需要帮助，很多关于这个问题。

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<title>Demo</title> 
 
<style type="text/css"> 
 
    #container {position: relative; } 
 
    #location {width: 20em; border: 1px steelblue solid;} 
 
    #results { border: 1px gray solid; padding: 2px; position: absolute;background-color:aliceblue;} 
 
    #results ul { list-style: none; padding: 0; } 
 
    #results ul li {padding: 2px; color: dimgray; } 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div id="container"> 
 
    Enter a city or postal code:<br> 
 
    <input id="location" type="text" onKeyup="getLocation()" value="London"> 
 
    <div id="results"></div> 
 
</div> 
 

 
<script type="text/javascript"> 
 

 
function getLocation() { 
 
    var value, xhr, html, data, i; 
 
    value = document.getElementById('location').value; 
 
    if (value.length < 2) return; 
 
    xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + value, true); 
 
    xhr.onreadystatechange = function() { 
 
     if (xhr.readyState==4 && xhr.status==200) { 
 
      data = JSON.parse(xhr.responseText); 
 
      html = ''; 
 
      for(i=0; i< data.results.length; i++) { 
 
       html += '<li>' + data.results[i].formatted_address; 
 
      } 
 
      document.getElementById('results').innerHTML = '<ul>' + html + '</ul>'; 
 
     } 
 
    } 
 
    xhr.send(); 
 
} 
 
    
 
getLocation(); 
 
document.getElementById('location').focus(); 
 

 
</script> 
 
</body> 
 
</html>

来源

2015-05-11 01:13:28 Roberto

查看更新的jsfiddle。 http://jsfiddle.net/gad7ntgk/3/

问题，你已经是这个HTML被注释掉：

<!--<label for="city">City</label> 
      <input size="20" placeholder="Town or City" name="city" id="city" type="text"> 
      <br> 
      <label for="state">State</label> 
      <input size="10" placeholder="State/Province" name="state" id="state" type="text">-->

当值返回的值的分配应该是：

document.getElementById('city').value = c;

来源

2015-05-10 23:26:52

隐藏显示城市和状态，当邮编填充

回答

相关问题