未捕获的 TypeError：b.get 不是函数

Question

在使用 google maps api 实现 AutoComplete 地点时，当我尝试输入任何地点时，Chrome 控制台窗口会生成一堆错误。其中之一是 Uncaught TypeError: b.get is not a function at Ew._.k.get (js?key=[KEY]&libraries=places&callback=initMap:106)。

代码：

<!-- Google Maps API integration-->
<div class="gmaps">
    <div id="map"></div>
    <script>
      function initMap() {
      <!-- getting the user location -->
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(success);
      } else {
          alert('geolocation not supported');
      }
      <!-- if successfully found the location -->
      function success(position) {

          var uluru = {lat:position.coords.latitude, lng: position.coords.longitude};
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 15,
              center: uluru
            });

          var marker = new google.maps.Marker({
              position: uluru,
              map: map
           });
      }      
      var acOptions = {
            types: ['establishment']
        };
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infoWindow.close();
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);
            infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
            infoWindow.open(map, marker);
            google.maps.event.addListener(marker,'click',function(e){

                infoWindow.open(map, marker);

            });
        });
    }
    </script>
</div>

Answer 1

问题出在这一行：

autocomplete.bindTo('bounds', map);

当该代码首次运行时，map 尚未完成初始化，其边界无效。将该代码放入bounds_changed 事件监听器中：

google.maps.event.addListener(map,'bounds_changed', function() {
  autocomplete.bindTo(map, 'bounds');
});

proof of concept fiddle

代码 sn-p：

var infoWindow;
var map;

function initMap() {
  <!-- getting the user location -->
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, errorFunc);
  } else {
    alert('geolocation not supported');
  }

  function errorFunc(posErr) {
    console.log("Position Error code:" + posErr.code + " msg:" + posErr.message);
  }
  <!-- if successfully found the location -->
  function success(position) {
    infoWindow = new google.maps.InfoWindow();
    var uluru = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });

    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
  var acOptions = {
    types: ['establishment']
  };
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
  google.maps.event.addListener(map, 'bounds_changed', function() {
    autocomplete.bindTo(map, 'bounds');
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infoWindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
    marker.setPosition(place.geometry.location);
    infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
    infoWindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function(e) {

      infoWindow.open(map, marker);

    });
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map,
.gmaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<input type="text" id="autocomplete" />
<!-- Google Maps API integration-->
<div class="gmaps">
  <div id="map"></div>
</div>

Answer 2

确保在

中替换 [KEY]

https://maps.googleapis.com/maps/api/js?key=[KEY]...

使用可以从谷歌开发者控制台获得的真实密钥。 钥匙以'Aiza....'开始

确保变量 uluru 获得正确的值，即浮点数，而不是 null 或 undefined 之类的值。

var uluru = {lat:position.coords.latitude, lng: position.coords.longitude};

修改了你的代码，这部分丢失了。

<input type="text" id="autocomplete" />

现在可以了，检查一下here

see the screenshot of autocomplete in action