地址自动填充功能无法在网站

时间:2018-06-13 10:40:25

标签: javascript php user-interface

这是我的javascript代码。我在google API中添加了这个。如果我进入水中......它应该显示"海德拉巴,特伦甘纳,印度"。但它没有显示出来。如何在现场获得这些自动填充?



      <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
        
        });
        var card = document.getElementById('pac-card');
        var input = document.getElementById('pac-input');
        var types = document.getElementById('type-selector');
        var strictBounds = document.getElementById('strict-bounds-selector');

        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);

        var autocomplete = new google.maps.places.Autocomplete(input);


        autocomplete.addListener('place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("No details available for input: '" + place.name + "'");
            return;
          }

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

          infowindowContent.children['place-icon'].src = place.icon;
          infowindowContent.children['place-name'].textContent = place.name;
          infowindowContent.children['place-address'].textContent = address;
          infowindow.open(map, marker);
        });

         function setupClickListener(id, types) {
          var radioButton = document.getElementById(id);
          radioButton.addEventListener('click', function() {
            autocomplete.setTypes(types);
          });
        }
        setupClickListener('changetype-all', []);
        setupClickListener('changetype-address', ['address']);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);

        document.getElementById('use-strict-bounds')
            .addEventListener('click', function() {
              console.log('Checkbox clicked! New state=' + this.checked);
              autocomplete.setOptions({strictBounds: this.checked});
            });
      }
      
      </script>
      
    <script src="https://maps.googleapis.com/maps/api/js?key= ********&libraries=places&callback=initMap"async defer></script>
   
  
&#13;
   <div class="form-group">
      <label class="control-label col-sm-3" for="">Location   <span class="asteriskField">
        *
       </span>  :</label>
      <div class="col-sm-6">
       <input type="text" id="pac-input" class="form-control" placeholder="Location" name="location" required>
        <div id="map"></div>
      </div>
      <div class="clears"></div>
    </div>  
&#13;
&#13;
&#13;

0 个答案:

没有答案