我試用Google地圖API地理編碼功能。地圖加載正常,但即時通訊面臨地理編碼問題。我在輸入位置的頁面上有一個文本框,點擊提交按鈕,我想查明地圖上輸入的位置。谷歌地圖API中的地理編碼問題
setCenter方法正確標記地圖上的位置,第一次用預定義座標調用它。但是,在我爲getLatLng定義的回調函數內調用時,地圖上的位置不會更改以反映用戶輸入的位置。
任何有關如何解決這個問題的幫助將非常感激。以下是我的代碼。
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=my_api_key"> </script>
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
google.load("jquery", "1.3.1");
</script>
<script>
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
var burnsvilleMN = new GLatLng(44.797916,-93.278046);
map.setCenter(burnsvilleMN, 8);
$("#add-point").submit(function(){
geoEncode();
return false;
});
});
function geoEncode(){
var geocoder = new GClientGeocoder();
var reasons = [];
reasons[G_GEO_SUCCESS] = "Success";
reasons[G_GEO_MISSING_ADDRESS] = "Missing Address";
reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address.";
reasons[G_GEO_UNAVAILABLE_ADDRESS] = "Unavailable Address";
reasons[G_GEO_BAD_KEY] = "Bad API Key";
reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries";
reasons[G_GEO_SERVER_ERROR] = "Server error";
var address = $("#add-point input[name=address]").val();
if (geocoder) {
geocoder.getLatLng(address, function(point){
if (!point) {
alert(address + " not found");
}
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
});
}
else {
alert("Some Error :(");
}
}
</script>
<style type="text/css">
#map { width:500px; height:500px;float:right;}
#add-point { float:left; }
div.input { padding:3px 0; }
label { display:block; font-size:80%; }
input, select { width:150px; }
button { float:right; }
div.error { color:red; font-weight:bold; }
</style>
</head>
<body>
<form id="add-point" action="" method="POST">
<input type="hidden" name="action" value="savepoint" id="action">
<fieldset>
<legend>Add a Point to the Map</legend>
<div class="error" style="display:none;"></div>
<div class="input">
<label for="name">Location Name</label>
<input type="text" name="name" id="name" value="">
</div>
<div class="input">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<button type="submit">Add Point</button>
</fieldset>
</form>
<div id="map"></div>
</body>
</html>
謝謝。