Question

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/

中

Answer 1

请参阅更新的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;

Answer 2

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

请记住，您正在进行跨域ajax调用...这将在IE中失败＆lt; 10.如果你需要帮助，很多关于SO的问题。

＆＃13;

<!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>

＆＃13;

填充zip时隐藏显示城市和州

2 个答案: