通过ajax()请求获取Google Maps API的地址坐标

Question

我正在尝试通过下面的示例http://jsbin.com/inepo3/7/edit获取Google Maps API的经度和纬度坐标。 我期望会弹出一个“成功”的弹窗，但它一直显示“错误”的弹窗。 Google地图请求提供了正确的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>

- Guido Lemmens 2

---

使用哪个版本的Google地图API？ - KJYe.Name

我不确定，我猜是v2（你能把使用的地图URL转换成一个版本吗？） - Guido Lemmens 2

我再看一遍，非常确定现在是V3。 - KJYe.Name

为什么不直接使用Google Maps JavaScript API中的地理编码器？ - theazureshadow

我同意JSONP的这个变化基本上是谷歌强制人们使用谷歌地图地理编码API的方式。 - KJYe.Name

是的，Google Maps Javascript API 运行良好（http://jsbin.com/ujaxu4/2），但我只想与 jQuery 结合使用地理编码器。但这似乎不可能..？ - Guido Lemmens 2

Answer 1

谷歌地图API V3使得外部库与JSONP更难合作。以下是一篇有关此问题的博客文章。

JSONP和Google Maps API Geocoder以及jQuery的修复方法

---

另一种获取地理编码的方法是使用Google Map V3 API Geocoder Service。这是一个示例，我帮助了一个遇到类似问题的人，让他用Google Map V3 Geocoder Service替换他的JSONP。请查看此JSFiddle演示：

这基本上是核心。我们基本上使用Twitter来获取推文的地址（例如：伦敦、马德里或乔治亚等），并使用Google地图的地理编码服务将实际地址转换为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>");
        });
    });

- KJYe.Name

---

很酷，我刚刚按照你的例子进行了实现，并将其添加到我的原始帖子中。这非常完美！ - Guido Lemmens 2

@Fincha，我大约一年前回答了这个问题，但我想你可以在jsfiddle或其他地方展示一下你到目前为止尝试过的东西。 - KJYe.Name

@Fincha 在使用 Google Map v3 地理编码服务时遇到了跨域错误吗？ - KJYe.Name