自动填充半径搜索无法在我的Google地图中使用

时间:2018-04-24 13:48:22

标签: javascript reactjs google-maps google-maps-api-3

我想在我的gmaps自动填充地点搜索上实现半径,所以我可以先从该半径获得搜索提示。

我的代码

var options = {
        types: [],
        componentRestrictions: {
            'country': 'IN'
        },
        location : { lat: 17.3850, lng: 78.4867 },
        radius : 5000
    };
    let inputPick = document.getElementById('pick');
    const autocompletePick = new google.maps.places.Autocomplete(inputPick, options);

    google.maps.event.addListener(autocompletePick, 'place_changed',  () => {
        let place =autocompletePick.getPlace();
        // console.log(place.name)
        // document.getElementById('pick').value = place.name;
        this.setState({pickAddress:place.name})
        let lat = place.geometry.location.lat(),
            lng = place.geometry.location.lng();
        //putting place in pick field
        let geocoder = new google.maps.Geocoder;
        geocoder.geocode({'location': {lat:lat,lng:lng}}, function(results, status) {
            if (status === 'OK') {
                // console.log(results[0].formatted_address)
                document.getElementById('pick').value = results[0].formatted_address;
            }
        })

但是现在我遍布全国各地 我在谷歌搜索但没有得到适当的解决方案。任何人都可以帮助我,我被卡住了:

1 个答案:

答案 0 :(得分:0)

如果您查看Google Maps JavaScript API参考文档,您会发现AutocompleteOptions对象没有locationradius字段

https://developers.google.com/maps/documentation/javascript/reference/3/#AutocompleteOptions

相反,它有bounds字段来定义您要搜索的区域,strictBounds字段仅限于此区域的结果。

您应该使用boundsstrictBounds自动填充选项重写代码。像

这样的东西
var options = {
    bounds: cityBounds,
    strictBounds: true,
    types: ['geocode'],
    componentRestrictions: { country: "IN" }
};

查看边界文档以获取更多详细信息

https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBounds

https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBoundsLiteral

我希望这有帮助!