Question

我正在尝试在Google Maps autocomplete中使用ext.Net。我知道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

中删除回调

$scope.tabs = [
    {id: 1, label: "label for tab 1", url: "url-tab-1.html"},
    {id: 2, label: "label for tab 2", url: "url-tab-2.html"}
];

$scope.onSelect = function(tab) {
    $scope.selectedTab = tab.id;
};
$scope.onSelect(1);

C＃ext.net ：（解决方法？）InvalidValueError：不是HTMLInputElement的实例（Google地图自动完成）

1 个答案: