javascript - 如何将 gmap 搜索自动完成功能限制在有限的国家/地区

标签 javascript jquery google-maps google-maps-api-3

我正在开发一个网站,我正在其中实现带有往返设施的 Gmap。一切都运行良好,但现在我只希望它能够自动完成以限制在一个特定的国家/地区。这是我的代码..

$(document).ready(function() {
initialize_direction_map();
setDestination();
$("#start").autocomplete({ 
    source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
            response($.map(results, function(item) {
                return {
                    label:  item.formatted_address,
                    value: item.formatted_address,
                    latitude: item.geometry.location.lat(),
                    longitude: item.geometry.location.lng()
                }
            }));
        })
    },
    //This bit is executed upon selection of an address
    select: function(event, ui) {
        $("#s_latitude").val(ui.item.latitude);
        $("#s_longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        map.setCenter(location);
        map.setZoom(12);
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        document.getElementById('direction_box').style.display='block';
        calcRoute();
    }
});

$("#end").autocomplete({
    //This bit uses the geocoder to fetch address values
    source: function(request, response) {

        geocoder.geocode( {'address': request.term }, function(results, status) {
            response($.map(results, function(item) {
                return {
                    label:  item.formatted_address,
                    value: item.formatted_address,
                    latitude: item.geometry.location.lat(),
                    longitude: item.geometry.location.lng()
                }
            }));
        })
    },
    //This bit is executed upon selection of an address
    select: function(event, ui) {
        $("#e_latitude").val(ui.item.latitude);
        $("#e_longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);

        calcRoute();
        $("table.adp-directions").css("width","300px");
    }
   });
});

function initialize_direction_map(){
//MAP
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(20.5937,78.9629);
var options = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

//GEOCODER
geocoder = new google.maps.Geocoder();
 }

最佳答案

您可以使用Google Maps JavaScript API Places图书馆。 Google Places JavaScript 库中的函数使您的应用程序能够搜索定义区域内包含的地点,例如 map 边界或固定点周围。

以下是如何按国家/地区进行限制的示例代码:

function initialize() {

var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}

关于javascript - 如何将 gmap 搜索自动完成功能限制在有限的国家/地区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36770711/

相关文章:

javascript - 使用下划线过滤 JSON

javascript - 删除子元素,但使用 jQuery/javascript 保留内容

javascript - AngularJS ng-fab-form 的服务器错误

javascript - 仅删除特定 Div Id

IE 中的 Jquery 悬停背景闪烁

c# - 适用于 Mac 上 Android 4.0 的 Mono 中的 GoogleMaps

javascript - HTML5 视频在开始播放另一个视频时使用 Javascript 暂停

jQuery XML解析如何获取元素属性

google-maps - 通过地址查找企业 "At this location"

jquery - 使用Google Maps Javascript API v3的HTML/CSS标记