Автозаполнение Google Maps и Places: как получить один и тот же город и страну, используя их оба - PullRequest
Новая
       66

Автозаполнение Google Maps и Places: как получить один и тот же город и страну, используя их оба

0 голосов
/ 06 августа 2020

Я пытаюсь реализовать поиск, используя карты Google или места Google. У меня есть карта с событием щелчка, которое захватывает город и страну

JSFIDDLE (Пожалуйста, добавьте свой ключ api, чтобы он работал, и измените язык на en, если его трудно увидеть разница в арабском c) 

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&language=ar&callback=initMap&libraries=places&v=weekly"
    defer
></script>    

var place = {lat: 24.637656, lng: 46.713785};

var map = new google.maps.Map(
         document.getElementById('map'), {
                zoom: 6,
                center: place,
                mapTypeId: 'roadmap'
         });

var marker = new google.maps.Marker({
            position: place,
            map: map,
            title: 'Click to zoom'
        });

map.addListener('click', function(e) {
            for(i=0; i<gmarkers.length; i++){
                gmarkers[i].setMap(null);
            }
            placeMarkerAndPanTo(e.latLng, map, gmarkers);
            $("#lat").val(e.latLng.lat());
            $("#lon").val(e.latLng.lng());

            var latlng;
            latlng = new google.maps.LatLng($("#lat").val(),  $("#lon").val());

            new google.maps.Geocoder().geocode({'latLng' : latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        var country = null, countryCode = null, city = null, cityAlt = null;
                        var c, lc, component;
                        for (var r = 0, rl = results.length; r < rl; r += 1) {
                            var result = results[r];

                            if (!city && result.types[0] === 'locality') {
                                for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                                    component = result.address_components[c];

                                    if (component.types[0] === 'locality') {
                                        city = component.long_name;
                                        break;
                                    }
                                }
                            }
                            else if (!city && !cityAlt && result.types[0] === 'administrative_area_level_1') {
                                for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                                    component = result.address_components[c];

                                    if (component.types[0] === 'administrative_area_level_1') {
                                        cityAlt = component.long_name;
                                        break;
                                    }
                                }
                            } else if (!country && result.types[0] === 'country') {
                                country = result.address_components[0].long_name;
                                countryCode = result.address_components[0].short_name;
                            }

                            if (city && country) {
                                break;
                            }
                        }

                        console.log("City: " + city + ", City2: " + cityAlt + ", Country: " + country + ", Country Code: " + countryCode);
                    }
                }
            });

        });

function placeMarkerAndPanTo(latLng, map, gmarkers) {
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
        marker.addListener('click', function() {
            map.setZoom(8);
            map.setCenter(marker.getPosition());
        });
        gmarkers.push(marker);

    }

, щелкнув в любом месте карты, вы получите название города и страну на указанном языке, т.е. араби c.

Я также добавлено поле автозаполнения 

var options = {
    types: ['(cities)']
};

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

Проблема 1: при автозаполнении при поиске с обоими языками Arabi c и Engli sh нельзя указать для него один язык.

Проблема 2: ( который является основным) Я планирую использовать эти функции при поиске свойств в базе данных, поэтому, когда пользователь использует автозаполнение, он / она получает то же значение, если использовал карту, которая сейчас не та. Это будет реализовано при добавлении и поиске свойств, чтобы все города и страны совпадали правильно. Я хочу сохранить город и страну с каждым объектом в базе данных, чтобы пользователи могли искать, используя их по стране и городу. Как такое возможно?

введите описание изображения здесь

...