C # ext.net: (Временное решение?) InvalidValueError: не экземпляр `HTMLInputElement` (автозаполнение карт Google) - PullRequest
Новая
       22

C # ext.net: (Временное решение?) InvalidValueError: не экземпляр `HTMLInputElement` (автозаполнение карт Google)

0 голосов
/ 04 июля 2018

Я пытаюсь использовать Google Maps autocomplete в ext.Net. Я знаю, что Google autocomplete поддерживает только window.HTMLInputElement(input tags). Есть ли обходной путь, который работает?

КОД

1012 * Javascript *

      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() {
          // Create the autocomplete object, restricting the search to geographical
          // location types.
          autocomplete = new google.maps.places.Autocomplete(
              /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
              { types: ['geocode'] });

          // When the user selects an address from the dropdown, populate the address
          // fields in the form.
          autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
          // Get the place details from the autocomplete object.
          var place = autocomplete.getPlace();

          for (var component in componentForm) {
              document.getElementById(component).value = '';
              document.getElementById(component).disabled = false;
          }

          // Get each component of the address from the place details
          // and fill the corresponding field on the form.
          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(component).value = val;
              }
          }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      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());
              });
          }
      }

Вот 2 поля, если использовать <input, то это работает, но если я использую <ext:TextField, тогда это не 

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

<td class="wideField" colspan="3">
            <%--<input class="field" id="locality"
              disabled="true">

            </input>--%>
            <ext:TextField ID="autocomplete" runat="server" EmptyText="Enter your address">
            <Listeners>
                <AfterRender Handler="
                    // Create the autocomplete object, restricting the search to geographical
                      // location types.
                      autocomplete = new google.maps.places.Autocomplete(
                          /** @type {!HTMLInputElement} */(document.getElementById('autocomplete-inputEl')),
                          { types: ['geocode'] });

                      // When the user selects an address from the dropdown, populate the address
                      // fields in the form.
                      autocomplete.addListener('place_changed', fillInAddress);
                    var input = document.getElementById('autocomplete-inputEl');          
         var searchBox = new google.maps.places.SearchBox(input);   
                                "
                    />
            </Listeners>
        </ext:TextField>

        </td>

1 Ответ

0 голосов
/ 04 июля 2018

Проблема с TextField заключается в тайминге рендеринга: при вызове функции инициализации тег ввода еще не доступен.

Инициализация автозаполнения из события TextField AfterRender, например:

РЕДАКТИРОВАТЬ: Извините, если я не достаточно ясно, вы должны заменить все в обработчике, я отредактировал образец. Также удалите обратный вызов из вызова API & callback = initAutocomplete 

<ext:TextField ID="autocomplete" runat="server">
    <Listeners>
        <AfterRender Handler="
                autocomplete = new google.maps.places.Autocomplete(
                        (document.getElementById('autocomplete-inputEl')),
                        { types: ['geocode'] });            
                autocomplete.addListener('place_changed', fillInAddress);                                                  
            ">
        </AfterRender>
    </Listeners>
</ext:TextField>
...