未捕获的类型错误：b.get 不是函数

Question

在使用谷歌地图 API 实现自动完成地点时，当我尝试输入任何地点时，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');
});

概念证明小提琴

代码片段：

autocomplete.bindTo('bounds', map);

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

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);