获取谷歌地图API阿贾克斯地址坐标（）请求 [英] Get address coordinates of Google Maps API by ajax() request

问题描述

我想通过下面的例子中 http://jsbin.com/获得液化天然气和谷歌地图API的经纬度坐标inepo3 / 7 /编辑。我期待有一个成功的弹出，但它一直显示错误弹出。 谷歌地图请求提供了正确的JSON反馈（由萤火虫选中）。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（）。就绪（函数（）{

        $ .fn.getCoordinates =功能（地址）{

            $阿贾克斯（
            {
                键入：GET，
                网址：http://maps.google.com/maps/api/geo$c$c/json
                数据类型：JSONP
                数据： {
                    地址：地址，
                    传感器：真
                }，
                成功：功能（数据）{
                    设置=数据;
                    警报（套）;
                }，
                错误：函数（）{
                    警报（错误）;
                }
            }）;
        };

        $（）getCoordinates（荷兰阿姆斯特丹）;
    }）;
＆LT; / SCRIPT＆GT;
 

有谁知道如何解决这个问题？

问候， 圭多LEMMENS

修改

我发现使用谷歌地图的JavaScript API组合在jQuery的一个bether解决方案：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（）。就绪（函数（）{
        VAR user1Location =阿姆斯特丹，荷兰;
        VAR地理codeR =新google.maps.Geo codeR（）;
        //转换位置为经度和纬度
        地理coder.geo code（{
            地址：user1Location
        }，功能（locResult）{
            执行console.log（locResult）;
            变种LAT1 = locResult [0] .geometry.location.lat（）;
            变种lng1 = locResult [0] .geometry.location.lng（）;
            $（＃testDiv）的HTML（纬度：+ LAT1 +＆其中p为H.;经度：+ lng1 +＆所述; / P＆gt;中）。
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

谷歌地图API V3就更难外部库与JSONP工作。这是一个关于它的博客文章。

JSONP和谷歌地图API地理codeR加上一个固定瓦特/ jQuery的

---

获得地理编码的另一种方法是使用谷歌地图API V3地理codeR服务。下面是我帮这是有一个类似的问题，因为你要取代他的JSONP使用谷歌地图V3地理codeR服务的人的例子。看看这个的jsfiddle演示：

这是基本的核心。我们基本上是使用Twitter来获取鸣叫的地址（例如伦敦，马德里和格鲁吉亚等），并使用谷歌地图的地理codeR转换服务的实际地址为经纬度：

  $。的getJSON（
    为url1，功能（结果）{//获取鸣叫
        VAR RES1 =结果。结果[0] .text段;
        变种user1name =结果。结果[0] .from_user;
        变种user1Location =结果。结果[0] .location;

        //得到第一个鸣叫的响应，并将其放置在div内
        $（＃最后tweet1）HTML（RES1 +＆LT; P＆GT;从+ user1name +（+ user1Location +）＆LT; / P＆GT;＆LT; P＆gt;中）;
        //转换位置为经度和纬度
        地理coder.geo code（{
            地址：user1Location
        }，功能（locResult）{
            执行console.log（locResult）;
            变种LAT1 = locResult [0] .geometry.location.lat（）;
            变种lng1 = locResult [0] .geometry.location.lng（）;
            $（＃testDiv）的HTML（纬度：+ LAT1 +＆其中p为H.;经度：+ lng1 +＆所述; / P＆gt;中）。
        }）;
    }）;
 

I'm trying to get lng and lat coordinates of the Google Maps API by the next example http://jsbin.com/inepo3/7/edit. I expect a 'success' popup, but it keeps showing the 'Error' popup. The google maps-request gives the correct json feedback (checked by 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>

Does anyone know how to fix this issue?

Regards, Guido Lemmens

EDIT

I found a bether solution using the Google Maps Javascript API combined in jQuery:

<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>

解决方案

Google Map API V3 makes it harder for external libraries to work with JSONP. Here is a blog post about it.

JSONP and Google Maps API Geocoder Plus A Fix w/ jQuery

---

An alternative way of getting Geocoding is to use the Google Map V3 API Geocoder Service. Here is an example that i helped a person that was having a similar issue as you to replace his JSONP to use Google Map V3 Geocoder Service. Take a look at this JSFiddle Demo:

This is basically the core. We basically use twitter to get the tweet's address (IE. London, Madrid or Georgia etc) and convert the actual address into LatLng using Google Map's Geocoder Service:

$.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>");
        });
    });

这篇关于获取谷歌地图API阿贾克斯地址坐标（）请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！