如何使用javascript在Google Map Places API中显示两个或两个以上印度的citite的结果

时间:2018-10-05 05:38:36

标签: javascript google-places-api

这是我的代码

<script>
    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 initAutocomplete() {

        var cityBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(28.027138, 73.302155), //bikaner city
            new google.maps.LatLng(26.922070, 75.778885)  //jaipur city
        );

        var options = {
            bounds: cityBounds,
            types: ['geocode'],
            componentRestrictions: {
                country: 'in'
            }
        };
        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')),
            options);

        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        var place = autocomplete.getPlace();

        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 = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
                autocomplete.setOptions({
                    strictBounds: true
                });
            });
        }
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js? 
key=MY_API_KEY&libraries=places&callback=initAutocomplete"
    async defer></script>
</body>
</html>

我只想在搜索框中向用户显示印度的两个城市结果,但是它不起作用,我尝试了很多示例和解决方案,但没有找到任何解决方案来显示其他城市的结果这也是我不想显示的。我在Google上到处搜索它,但是找不到解决方案,然后请过来告诉我,并指导我该怎么做。

  

搜索框代码在这里

<input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>

如果需要更多信息,请通知我,但请帮助我,因为这对我非常重要

0 个答案:

没有答案