我怎样才能使用谷歌地图API和地方图书馆？ [英] How can I use google maps API and places library?

问题描述

我正尝试使用Google地图API加载地图并自动填充表单。但是，当我尝试初始化时，我无法做到。

我可以这样做：

 <脚本async延迟
 src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap> 
< / script> 
  

地图起作用。 Places API不。我尝试添加&库= ...到最后，但没有奏效。如果我添加：

 < script type =text / javascript
 src =https：// maps .googleapis.com /地图/ API / JS键= YOUR_API_KEY&安培;库=几何> 
< / script> 
  

这是我的整个页面：

 < HTML> 
< head> 
< link rel =stylesheettype =text / csshref =control_panel.css> 
< style type =text / css> 
 html，body {height：100％;保证金：0;填充：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>打开页面< / ul> 
< ul class =item>进行预订< / ul> 
< ul class =item>热图< / ul> 
< ul class =item> Blah< / ul> 
< ul class =item> Blah< / ul> 
 
< / div> 
< div> 
< div id =locationField> 
< input id =autocompleteplaceholder =输入您的地址
 onFocus =geolocate（）type =text>< / input> 
< / div> 
< / div> 
< div id =map> 
< script type =text / javascript> 
 var map; 
函数initMap（）{
 map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat：-34.397，lng：150.644}，
 zoom：8 
}）; 
} 
< / script> 
< / div> 
 
< script type =text / javascript> 
 //将自动完成对象偏移到用户的地理位置，// [START region_geolocation] 
 //由浏览器的navigator.geolocation对象提供。 
函数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] 
 
函数initAutocomplete（）{
 //创建自动完成对象，限制搜索到地理
 //位置类型。 
 autocomplete = new google.maps.places.Autocomplete（
 / ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），
 {types：['地理编码']}）; 
 
 //当用户从下拉列表中选择一个地址时，填写表单中的地址
 //字段。 
 autocomplete.addListener（'place_changed'，fillInAddress）; 
} 
函数fillInAddress（）{
 //从自动完成对象中获取地点详细信息。 
 var place = autocomplete.getPlace（）; 
} 
 
 
< / script> 
 
< / body> 
< / html> 
< / script> 
 
< / body> 
< / html> 
  

然而，自动完成表单不起作用

解决方案

您不调用 initAutocomplete 函数。最简单的解决方法是在 initMap 的最后调用它。

 函数initMap（）{
 map = new google.maps.Map（document.getElementById（'map'），{
 center：{
 lat：-34.397，
 lng：150.644 
}，
 zoom：8 
}）; 
 initAutocomplete（）; 
} 
  

概念证明小提琴

程式码片段：

  var map;函数initMap（）{map = new google.maps.Map（document.getElementById（'map'），{center：{lat：-34.397，lng ：150.644}，zoom：8}）; initAutocomplete（）; } //将自动完成对象偏置到用户的地理位置，// [由浏览器的'navigator.geolocation'提供的[START region_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（）{//创建自动完成对象，将搜索限制为地理位置类型。 autocomplete = new google.maps.places.Autocomplete（/ ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），{types：['geocode']}）; //当用户从下拉列表中选择一个地址时，填写表单中的地址字段。 autocomplete.addListener（'place_changed'，fillInAddress）;}函数fillInAddress（）{//从自动完成对象中获取地点详细信息。 var place = autocomplete.getPlace（）;}  

<身体{身高：100％;保证金：0;填充：0; } #map {height：100％; }

< script src =https：// maps .googleapis.com / maps / api / js？libraries = places& callback = initMapasync defer>< / script>< div id =headerBar> < ul class =item>打开页面< / ul> < ul class =item>进行预订< / ul> < ul class =item>热图< / ul> < ul class =item> Blah< / ul> < ul class =item> Blah< / ul>< / div>< div> < div id =locationField> < input id =autocompleteplaceholder =输入您的地址onFocus =geolocate（）type =text/> < / div>< div id =map>

I am trying to use the google maps API to load a map and autocomplete a form. However when I try and initialise I can't do it.

I can do this:

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

And the map works. Places API doesn't. I tried adding &libraries=... to the end but that didn't work. If I add:

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

This is my whole page:

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

However the autocomplete form doesn't work

解决方案

You are not calling the initAutocomplete function. Simplest fix is to call it at the end of 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

code snippet:

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">

这篇关于我怎样才能使用谷歌地图API和地方图书馆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！