地理编码功能不执行

时间:2017-04-26 17:48:33

标签: google-maps-api-3 google-geocoder

我遇到的问题是地理编码没有被执行。在我的html文件中,我有以下表格,其中包含地址信息。

 <div class="row">
  <div class="col s6">
    <form id="addAddress" name="address_info" method="post">
      <div class="row">
        <div class="input-field col s12">
          <input id="address" name="address" type="text" required>
          <label for="address">Address</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input id="city" name="city" type="text" required>
          <label for="city">City</label>
        </div>
        <div class="input-field col s2">
          <input id="state" name="state" type="text" required>
          <label for="state">State</label>
        </div>
        <div class="input-field col s4">
          <input id="zipcode" name="zipcode" type="text" required>
          <label for="zipcode">Zipcode</label>
        </div>
      </div>
      <button class="btn light-blue darken-5" type="submit" name="address_info">Submit</button>
    </form>
    </div>
</div>

然后,js文件使用表单中的信息来获取纬度和经度值。我遇到的问题是地理编码功能没有执行。控制台日志在启动geo&#39;之前显示了fulladdress和&#39;,但没有别的。

function addAddress() {
  document.getElementById("addAddress").addEventListener("submit", function() {
    var geocoder = new google.maps.Geocoder();
    const address = document.getElementById("addAddress").elements.namedItem("address").value;
    const city = document.getElementById("addAddress").elements.namedItem("city").value;
    const state = document.getElementById("addAddress").elements.namedItem("state").value;
    const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
    var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
    console.log(fulladdress);
    console.log("before start geo");
    geocoder.geocode({'address': fulladdress}, function(results,status){
        console.log("start geo");
        if(status == google.maps.GeocoderStatus.OK){
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            console.log(latitude, longitude);
            console.log("after geo");
        }
    });
 });
}
function main() {
  addAddress();
}

document.addEventListener("DOMContentLoaded", main());

我有js文件和谷歌地图api,我的api密钥链接到我的html文件。我启用了Geocode API。任何帮助将不胜感激!

编辑:

function geolocate(address, callback){
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
            callback(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        }
    });
}
function addAddress() {
  document.getElementById("addAddress").addEventListener("submit", function() {
    var geocoder = new google.maps.Geocoder();
    const address = document.getElementById("addAddress").elements.namedItem("address").value;
    const city = document.getElementById("addAddress").elements.namedItem("city").value;
    const state = document.getElementById("addAddress").elements.namedItem("state").value;
    const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
    var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
    console.log(fulladdress);
    console.log("before start geo");
    geolocate(fulladdress, function(latitude, longitude){
        console.log(latitude, longitude);
    });
 });
}

0 个答案:

没有答案