首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将自动补全结果(没有地图)限制在一个城市

问如何将自动补全结果(没有地图)限制在一个城市
EN

Stack Overflow用户
提问于 2014-10-08 15:13:26
回答 1查看 843关注 0票数 0

下面是使用Lat/long实现自动补全的代码。我希望结果是特定于某个城市的。我的意思是,搜索自动补全应该限制在一个城市。帮帮我..。越快越好

代码语言:javascript
复制
<!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>

<script type="text/javascript">
$("#autocomplete").on('focus', function () {
    geolocate();
});

var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */ (document.getElementById('autocomplete')), {
        types: ['geocode']
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
    });
}

function fillInAddress() {

    var place = autocomplete.getPlace();

    document.getElementById("latitude").value = place.geometry.location.lat();
    document.getElementById("longitude").value = place.geometry.location.lng();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}

function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);

            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById("latitude").value = latitude;
            document.getElementById("longitude").value = longitude;

            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
        });
    }

}

initialize();

</script>
      </head>
<body onload="initialize()">
<div id="locationField">
    <input id="autocomplete" size="60" placeholder="Enter your address" type="text"></input>
</div>
<table id="address">
    <tr>
        <td class="label">Lat</td>
        <td class="slimField">
            <input type="text" class="field" id="latitude"></input>
        </td>
        <td class="label">Long</td>
        <td class="wideField">
            <input type="text" class="field" id="longitude"></input>
        </td>
    </tr>
</table>
</body>
 </html>
EN

回答 1

Stack Overflow用户

发布于 2014-10-08 15:25:41

代码语言:javascript
复制
$.get("http://ipinfo.io", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#address").html("Location: " + response.city + ", " + response.region);
    $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");

这里是fiddle http://jsfiddle.net/zK5FN/2/,它将根据lat和long告诉您城市。

它使用ipinfo.io

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26251110

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档