Question

使用google maps api实现自动完成位置时，当我尝试输入任何位置时，会在chrome控制台窗口生成一堆错误。其中一个是Uncaught TypeError：b.get不是Ew ._。k.get（js？key = [KEY]＆amp; libraries = places＆amp; callback = initMap：106）的函数。

代码：

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

代码段

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]

compact()        { echo "compact alarms" }

node() { echo "node alarms" }

severity() { echo "Severity alarms" }

csv() { echo "CSV generator" }

table() { echo "tabular data" }

help() { echo "help" }

exit() { echo "exit" }

while getopts ":c :n :s :x :t :h :e" opt; do
  case $opt in
            c) compact
                ;;
            n) node
                ;;
            s) severity
                ;;
            x) csv
                ;;
            t) table
                ;;
            h) help
                ;;
            e) exit
                ;;
            *)
                echo "Error wrong Syntax,Opening help" && help
                ;;
        esac
done

使用真正的密钥，可以从谷歌开发者控制台获得。钥匙开始有机会...... Aiza ......＆＃39;

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

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

稍微修改了这部分代码。

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

现在可以查看here

see the screenshot of autocomplete in action

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

2 个答案: