Значение поля ввода автозаполнения API Карт Google

Question

Я добавил карту Google на веб-страницу, у нее также есть текстовое поле с картами Google Autocomplete. Пользователь может добавить маркер на карту, щелкнув по карте или набрав адрес местоположения в текстовом поле Автозаполнение. Если пользователь нажимает на карту, маркер добавляется на карту, и адрес местоположения отображается в текстовом поле Автозаполнение.

Код:

<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=LK&libraries=places"></script> 
<div id="map"></div> 
<input id="inputLocation" name="inputLocation" type="text"> 

<script type="text/javascript"> 

    $(function() { 

     var mapOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(6.9182471651737405, 80.70556640625), 
      streetViewControl: false 
     }; 

     var autocompeteOptions = { 
      componentRestrictions: { country: "lk" } 
     }; 

     var map; 
     var locationMarker; 

     var geocoder = new google.maps.Geocoder(); 

     function initialize() { 

      map = new google.maps.Map(document.getElementById('map'), mapOptions); 

      //Add marker when user clicked on Map 
      google.maps.event.addListener(map, 'click', function (event) { 

       var location = event.latLng; 

       if (locationMarker) { 
        locationMarker.setMap(null); 
       } 

       geocoder.geocode({ 'latLng': location }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         if (results[1]) { 

          //locationMarker 
          locationMarker = new google.maps.Marker({ 
           position: location, 
           map: map 
          }); 

          document.getElementById('inputLocation').value = results[1].formatted_address; 

         } else { 
          alert('No results found'); 
         } 
        } else { 
         alert('Geocoder failed due to: ' + status); 
        } 
       }); 

      }); //click 

      var autocompleteInput = new google.maps.places.Autocomplete(document.getElementById('inputLocation'), autocompeteOptions); 

      //Autocomplete place Changed 
      google.maps.event.addListener(autocompleteInput, 'place_changed', function() { 

       autocompleteInput.bindTo('bounds', map); 

       locationMarker = new google.maps.Marker({ 
        map: map 
       }); 

       var selectedPlace = autocompleteInput.getPlace(); 
       if (!selectedPlace.geometry) { 
        return; 
       } 

       if (selectedPlace.geometry.viewport) { 
        map.fitBounds(selectedPlace.geometry.viewport); 
       } else { 
        map.setCenter(selectedPlace.geometry.location); 
        map.setZoom(17); 
       } 

       locationMarker.setPosition(selectedPlace.geometry.location); 

       var locationAddress = ''; 
       if (selectedPlace.address_components) { 
        address = [ 
         (selectedPlace.address_components[0] && selectedPlace.address_components[0].short_name || ''), 
         (selectedPlace.address_components[1] && selectedPlace.address_components[1].short_name || ''), 
         (selectedPlace.address_components[2] && selectedPlace.address_components[2].short_name || '') 
        ].join(' '); 
       } 

      }); //From place_changed 

     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

    }); 
</script> 

Это прекрасно работает на компьютере веб-браузер, но когда я проверить его на мобильном устройстве (Galaxy S III, iPhone 5, ...) это не работает, как ожидалось (по фактической устройство и эмулятор Chrome).

Если я сначала нажму на текстовое поле ввода, а затем на карте, он добавит маркер на карту и отобразит адрес во входном текстовом поле, но если щелкнуть где-нибудь на странице, то значение «Текстовое поле» будет потеряно. (Это происходит, только если текстовое поле сфокусировано, прежде чем нажимать на карту)

Есть ли что-нибудь, что я могу сделать, чтобы исправить эту проблему?

Answer 1

Как прокомментировал Анто Юркович, это также происходит в FF.

Вы можете наблюдать разницу:

Когда он работает, как ожидается, ввод не имеет фокуса. Когда он терпит неудачу, вход не потеряет фокус при нажатии на карту.

Причина:

автозаполнения внутренне слушает focus и blur. Когда вы нажимаете где-то на странице (а не на карте), автозаполнение потеряет focus, и будет запущен blur -listener автозаполнения.

blur -listener установит значение ввода на name -событие текущего места. Текущее место будет храниться внутренне на основе результата запроса Autocomplete (который в этом случае пуст).

Автозаполнение не замечает изменений в значении ввода (применяемого вами программно), оно только прослушивает ключ - события ввода.

Так что вы можете сделать, это:

Удалить фокус от входа (либо в click -callback карты или перед установкой значения на входе):

document.getElementById('inputLocation').blur();