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