C# ext.net: (Workaround?) InvalidValueError: not an instance of `HTMLInputElement` (Google maps autocomplete)

Question

我正在尝试在 ext.Net 中使用 Google Maps autocomplete 。我知道Google autocomplete 只支持window.HTMLInputElement(input tags)。有没有可行的解决方法？

代码

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>

Answer 1

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>