Question

所以这就是我所拥有的： http://clients.pixelbleed.net/geocoder/geocoder.html

我对此非常满意，但我有第一个输入框正在工作 ...这意味着它需要一个地址，将其转换为lat / long并放在地图。我为第二个输入所做的就是复制codeAddress（）函数并重命名它。

我真正想做的是拿两个输入框，让某人打入地址，将其编码为lat / long并将其保存在变量中。然后，我可以操纵该变量来完成我最终需要做的等式......只是不确定如何保存它们。有什么想法吗？

这是我的JS：

<script type="text/javascript"> 
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
function codeAddress2() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
</script>

这就是按钮的称呼方式：

<body onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
  </div>
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress2()"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

Answer 1

我在这里创建了一个带有完整示例的Gist：https://gist.github.com/890998

我的解释如下......

您可以创建一个javascript对象，可以将结果存储为expando属性。然后在每个地理编码请求完成后，存储结果，然后调用函数进行计算。

添加一个变量，您可以将结果存储为expando属性

  var geoResults = {};

不是使用两个几乎相同的函数来进行地理编码，而是更改它以便接受地址输入的“id”。我们也可以使用id参数作为geoResults对象的属性名称。

  function codeAddress(id) {
    var address = document.getElementById(id).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });

        // store the results in the geoResults object
        geoResults[id] = results[0].geometry.location;
        doCalculation();

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

现在在我们的doCalculation（）函数中，我们可以检查两个地址是否已经过地理编码，如果是，那么就可以对结果做任何你想做的事。

  function doCalculation() {
    if (typeof geoResults.address1 === "object" 
        && typeof geoResults.address2 === "object") {

        // Yay.. do something now.
        // geoResults.address1 is a LatLng() object.
        // geoResults.address2 is a LatLng() object.
    }
  }

我们只需要用HTML更改两件事。

确保您拥有唯一的id属性。地址1＆amp;地址2
更改onclick属性，以便将id作为参数传递给codeAddress函数。

这是看起来如何

<body onload="initialize()"> 
  <div> 
    <input id="address1" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address1')"> 
  </div>
  <div> 
    <input id="address2" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address2')"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

从谷歌地图输入中保存两个变量

1 个答案: