我正试图通过下一个示例http://jsbin.com/inepo3/7/edit获取Google Maps API的lng和lat坐标。我期待一个“成功”弹出窗口,但它会一直显示“错误”弹出窗口。 谷歌地图请求提供了正确的json反馈(由firebug检查)。
<script type="text/javascript">
$().ready(function() {
$.fn.getCoordinates=function(address){
$.ajax(
{
type : "GET",
url: "http://maps.google.com/maps/api/geocode/json",
dataType: "jsonp",
data: {
address: address,
sensor: "true"
},
success: function(data) {
set = data;
alert(set);
},
error : function() {
alert("Error.");
}
});
};
$().getCoordinates("Amsterdam, Netherlands");
});
</script>
有谁知道如何解决这个问题?
此致 Guido Lemmens
修改
我在jQuery中使用Google Maps Javascript API找到了更好的解决方案:
<script type="text/javascript">
$().ready(function() {
var user1Location = "Amsterdam, Netherlands";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: user1Location
}, function(locResult) {
console.log(locResult);
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
$("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
});
});
</script>
答案 0 :(得分:9)
Google Map API V3使外部库更难与JSONP配合使用。这是一篇关于它的博客文章。
JSONP and Google Maps API Geocoder Plus A Fix w/ jQuery
获取地理编码的另一种方法是使用Google Map V3 API Geocoder Service。这是一个例子,我帮助一个有类似问题的人替换他的JSONP以使用Google Map V3地理编码服务。看一下这个JSFiddle Demo:
这基本上是核心。我们基本上使用twitter来获取推文的地址(IE。伦敦,马德里或佐治亚等),并使用Google Map的地理编码服务将实际地址转换为LatLng:
$.getJSON(
url1, function(results) { // get the tweets
var res1 = results.results[0].text;
var user1name = results.results[0].from_user;
var user1Location = results.results[0].location;
// get the first tweet in the response and place it inside the div
$("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + user1Location + ")</p><p>");
//convert location into longitude and latitude
geocoder.geocode({
address: user1Location
}, function(locResult) {
console.log(locResult);
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
$("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
});
});