jquery geocomplete - 获取用户当前位置名称

时间:2014-01-07 04:33:12

标签: javascript jquery google-maps

我们目前正在使用以下jquery插件对文本输入进行下拉地理自动完成,效果很好: http://ubilabs.github.io/geocomplete/

我们想要做的是在用户输入/选择任何内容之前在该输入框中显示用户当前的默认位置。例如:洛杉矶,悉尼或伦敦。类似于Facebook在地图标记旁边显示本地城市名称(然后您可以点击该名称将其更改为其他内容)

我的意思是:http://i.imgur.com/gt1TwLd.png (对不起,我不能将图像粘贴到< 10个重复点)

使用jquery geocomplete插件或Google Maps API的地理编码和地方自动填充服务是否可以实现这样的目标?

谢谢!

1 个答案:

答案 0 :(得分:2)

您需要合并https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition

与google places api

HTML - 加载Google地方资料库:

...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<div id="google"></div>
...

JS:

...
if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(addressToCode);
}

addressToCode = function (position,callback) {

        var service = new google.maps.places.PlacesService(document.getElementById('google'));
        var request = { query: new google.maps.LatLng(position.coords.latitude,position.coords.longitude) }
        service.textSearch(request, function (json, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              //RESULTS -- DO SOMETHING HERE 
              json[0].name;
            } else {
                //alert("Geocode was not successful for the following reason: " + json.status);
            }
        });
};
...

我提到了GeoCoding Api,我遇到了严重的api限制问题,但供参考,以下是代码:

没有HTML需要

JS:

  addressToCode = function (position) {
        var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," + position.coords.longitude + "&sensor=false";
        $.getJSON(url, function (json) {
            if (json.status == 'OK') {
                //DO SOMTHING HERE
                json.results[0].formatted_address;
            } else {
                //alert("Geocode was not successful for the following reason: " + json.status);
            }
        });
};