我正在尝试 Google Maps API 地理编码功能。 map 加载正常，但我面临地理编码问题。我在页面上有一个文本框，可以在其中输入位置，单击提交按钮后，我想在 map 上精确定位输入的位置。
setCenter 方法正确地标记了 map 上的位置，我第一次使用预定义的坐标调用它。但是，当从我为 getLatLng 定义的回调函数中调用时， map 上的位置不会更改以反射(reflect)用户输入的位置。
任何有关如何解决此问题的帮助将不胜感激。下面是我的代码。
<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>
谢谢。
最佳答案
stefpet的意思是替换
$(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;
});
});
与:
var map;
$(document).ready(function(){
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;
});
});
关于javascript - Google Maps API 中的地理编码问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1811894/