我遇到的问题是地理编码没有被执行。在我的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);
});
});
}