在Google地图中限制基于特定国家/地区的搜索位置api

我正在使用谷歌地方api自动完成位置作为用户类型.但是,我如何将建议限制在特定国家/地区？

这是我的javascript

function initAutocomplete() {

    // Create the search box and link it to the UI element.
    var input = document.getElementById('autocomplete-input');
    var searchBox = new google.maps.places.SearchBox(input);

    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
    });
}

Abhilash.. 13

通过将SearchBox更改为自动完成并传递带有要求的选项来修复它.如果有人需要,这是代码.

function initAutocomplete() {

    // Create the search box and link it to the UI element.
    var input = document.getElementById('autocomplete-input');
    var options = {
        componentRestrictions: {country: 'fr'}
    };

    var searchBox = new google.maps.places.Autocomplete(input, options);

    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
    });
}

Mayeenul Isl.. 7

注意:我使用的是Google Maps API v3(v3.30.13)

@ Abhilash解决问题的方法很好.但是在他的回答中,我遇到了一个问题:自动完成工作正常,但它没有触发该places_changed方法.而且也没有控制台错误.

然后通过@geocodezip在另一个线程中的回答,我发现,事件激发的Autocomplete不是places_changed,但是place_changed(注意单数形式的差异).

如果你想继续进行,还需要进行其他更改place_changed,因为place_changed它只返回一个地方,而不是一个地方数组.所以:

而不是.getPlaces()你必须使用.getPlace()

而不是places.forEach(function(place) { ... }你必须place直接工作.

var input = document.getElementById('pac-input');
var restrictOptions = {
    componentRestrictions: {country: 'bd'}
};
var searchBox = new google.maps.places.Autocomplete(input, restrictOptions);

searchBox.addListener('place_changed', function() {

    var place = searchBox.getPlace();

    if (place.length == 0) {
        return;
    }

    if (!place.geometry) {
        console.log("No details available for input: '" + place.name + "'");
        return;
    }

    // ...

});

警告

限制是:.SearchBox()谷歌搜索工作甚至使用随机字符串,但.Autocomplete()随机字符串无法找到任何.geometry,因此无法精确定位到地图上的任何匹配区域.有了.SearchBox(),如果你输入"一个地方的名称",按下回车键,它可以指向地名,地点.但是,.Autocomplete()如果没有选择自动提示[s],它就无法触发这个地方.geometry.以下console.log(place)显示随机字符串和自动完成选择项之间的区别:

后果

我对结果如何.Autocomplete()对我有用并不满意.因此,在获得更好的解决方案之前,我决定坚持使用该.SearchBox()方法 - 尽管它并不限制搜索建议.但绑定bounds_changed它会对搜索结果产生一点点影响,虽然它并不严格和令人满意,但至少有些东西比什么都好.¯\_(?)_/¯

// Bias the SearchBox results towards current map's viewport.
front_end_map.addListener('bounds_changed', function() {
    searchBox.setBounds(front_end_map.getBounds());
});

我拼命地期待着一个防弹解决方案......

通过将SearchBox更改为自动完成并传递带有要求的选项来修复它.如果有人需要,这是代码.

function initAutocomplete() {

    // Create the search box and link it to the UI element.
    var input = document.getElementById('autocomplete-input');
    var options = {
        componentRestrictions: {country: 'fr'}
    };

    var searchBox = new google.maps.places.Autocomplete(input, options);

    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
    });
}

注意:我使用的是Google Maps API v3(v3.30.13)

@ Abhilash解决问题的方法很好.但是在他的回答中,我遇到了一个问题:自动完成工作正常,但它没有触发该places_changed方法.而且也没有控制台错误.

然后通过@geocodezip在另一个线程中的回答,我发现,事件激发的Autocomplete不是places_changed,但是place_changed(注意单数形式的差异).

如果你想继续进行,还需要进行其他更改place_changed,因为place_changed它只返回一个地方,而不是一个地方数组.所以:

而不是.getPlaces()你必须使用.getPlace()

而不是places.forEach(function(place) { ... }你必须place直接工作.

var input = document.getElementById('pac-input');
var restrictOptions = {
    componentRestrictions: {country: 'bd'}
};
var searchBox = new google.maps.places.Autocomplete(input, restrictOptions);

searchBox.addListener('place_changed', function() {

    var place = searchBox.getPlace();

    if (place.length == 0) {
        return;
    }

    if (!place.geometry) {
        console.log("No details available for input: '" + place.name + "'");
        return;
    }

    // ...

});

警告

限制是:.SearchBox()谷歌搜索工作甚至使用随机字符串,但.Autocomplete()随机字符串无法找到任何.geometry,因此无法精确定位到地图上的任何匹配区域.有了.SearchBox(),如果你输入"一个地方的名称",按下回车键,它可以指向地名,地点.但是,.Autocomplete()如果没有选择自动提示[s],它就无法触发这个地方.geometry.以下console.log(place)显示随机字符串和自动完成选择项之间的区别:

后果

我对结果如何.Autocomplete()对我有用并不满意.因此,在获得更好的解决方案之前,我决定坚持使用该.SearchBox()方法 - 尽管它并不限制搜索建议.但绑定bounds_changed它会对搜索结果产生一点点影响,虽然它并不严格和令人满意,但至少有些东西比什么都好.¯\_(?)_/¯

// Bias the SearchBox results towards current map's viewport.
front_end_map.addListener('bounds_changed', function() {
    searchBox.setBounds(front_end_map.getBounds());
});

我拼命地期待着一个防弹解决方案......