如何使用谷歌地图 API 和地点库？答案

【问题标题】：How can I use google maps API and places library?如何使用谷歌地图 API 和地点库？
【发布时间】：2016-01-13 02:45:23
【问题描述】：

我正在尝试使用谷歌地图 API 来加载地图并自动填写表格。但是，当我尝试初始化时，我做不到。

我可以这样做：

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

地图有效。 Places API 没有。我尝试将 &libraries=... 添加到最后，但这没有用。如果我添加：

 <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>

这是我的整个页面：

<html>
  <head>
  <link rel="stylesheet "type="text/css" href="control_panel.css">
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
    <script type="text/javascript"
         src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqSTkzPn8PpJBY3Pclu-TTjmGDLzqKMD4&libraries=places&callback=initMap">
    </script>


  </head>
  <body>
    <div id="headerBar">
        <ul class="item">Opening Page</ul>
        <ul class="item">Make a booking</ul>
        <ul class="item">Heat Map</ul>
        <ul class="item">Blah</ul>
        <ul class="item">Blah</ul>

    </div>
    <div>
     <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address"
                 onFocus="geolocate()" type="text"></input>
        </div>
    </div>
    <div id="map">
    <script type="text/javascript">
        var map;
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
          });
        }
    </script>
    </div>

    <script type="text/javascript">
        // Bias the autocomplete object to the user's geographical location,   // [START region_geolocation]
        // 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());
            });
          }
        }

        // [END region_geolocation]

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


    </script>

  </body>
</html>
    </script>

  </body>
</html>

但是自动完成表单不起作用

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。您的第一次尝试应该奏效。
相关问题：why google map geometry conflict with drawing library

标签： google-maps google-maps-api-3 google-places-api

【解决方案1】：

您没有调用initAutocomplete 函数。最简单的解决方法是在 initMap 的末尾调用它。

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  initAutocomplete();
}

proof of concept fiddle

代码 sn-p：

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });
    initAutocomplete();
  }
  // Bias the autocomplete object to the user's geographical location,   // [START region_geolocation]
  // 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());
    });
  }
}

// [END region_geolocation]

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

 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
 #map {
   height: 100%;
 }

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<div id="headerBar">
  <ul class="item">Opening Page</ul>
  <ul class="item">Make a booking</ul>
  <ul class="item">Heat Map</ul>
  <ul class="item">Blah</ul>
  <ul class="item">Blah</ul>

</div>
<div>
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
  </div>
</div>
<div id="map">

【讨论】：

非常感谢这就是问题所在！