谷歌地图API之前/之后功能（如ajax）

Question

我想在查找之前放置一个加载图标，或者我需要 catch 查找位置开始/结束功能（如 ajax before/success 功能）

我找不到与此相关的任何资源。我想做；当您单击“查找当前位置”按钮时，您将看到一个小图标。进程完成后隐藏图标

我使用没有 jquery 的 javascript

Answer 1

使用Geocoding service 代码，我在<div id="floating-panel"></div> 中添加了<div id="loader"></div>。在此我在调用geocodeAddress(geocoder, resultsMap) 时添加了图像标签。您可以使用所需的图标进行更改

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

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });

}

function geocodeAddress(geocoder, resultsMap) {
  document.getElementById('loader').innerHTML = "<img src='https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'>"
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      document.getElementById('loader').innerHTML = ""
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      document.getElementById('loader').innerHTML = ""
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
  /*google.maps.event.addListenerOnce(map, 'idle', function(){
    alert()
});*/

}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<div id="floating-panel">
  <input id="address" type="textbox" value="Sydney, NSW">
  <input id="submit" type="button" value="Geocode">
  <div id="loader">
  </div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>