有什么方法可以自定义Google的自动完成地址结果吗? [英] Is there any way to customize Google's Auto complete address result?

问题描述

我想自定义自动建议结果.我想在结果顶部添加两个以上的地址.是否可以使用Google API? 为了获得更多理解，我在这里贴我的应用程序屏幕.我在这里输入地址.它显示了预测的地址，如何在结果顶部再添加2个地址.

I want to customize auto suggestion result. I want to add more two addresses at the top of the result. Is it possible using google api? for more understanding I stick here my app screen. there I am entering address. it showing predicted addresses, How can I add 2 more address at top of the result.

推荐答案

您不能对Autocomplete类做太多事情，至少不能对任何已记录的方法做很多事情.您可以使用自动完成服务类和getPlacePredictions方法来模仿标准自动完成功能的行为.

You can't do much with the Autocomplete class, at least not with any documented method. You can use the Autocomplete Service class and the getPlacePredictions method to mimic the behavior of the standard Autocomplete.

这意味着您将必须构建自己的UI和行为，但它也为您提供了更大的灵活性，使其可以按您想要的方式进行样式设置，并且它将允许您添加自定义轻松解决.

What that means is that you will have to build your own UI and behaviors, but it also gives you more flexibility to style it the way you want, and it will allow you to add your custom addresses easily.

这是一个简单的例子.它仅在顶部添加两个自定义地址.您将必须实现2个自定义地址背后的逻辑，因为当您单击它们时，目前什么也不会发生.但这不是最棘手的部分，此示例已经显示了您可以使用它做的很多事情.

Here is a quick example. It just adds two custom addresses on top. You will have to implement the logic behind the 2 custom addresses as currently nothing will happen when you click on them. But that's not the trickiest part, and this example shows already a lot of what you can do with it.

var autocompleteService, placesService, results, map;

function initialize() {

  results = document.getElementById('results');

  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 50)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Bind listener for address search
  google.maps.event.addDomListener(document.getElementById('address'), 'input', function() {

    results.style.display = 'block';
    getPlacePredictions(document.getElementById('address').value);
  });

  // Show results when address field is focused (if not empty)
  google.maps.event.addDomListener(document.getElementById('address'), 'focus', function() {

    if (document.getElementById('address').value !== '') {

      results.style.display = 'block';
      getPlacePredictions(document.getElementById('address').value);
    }
  });

  // Hide results when click occurs out of the results and inputs
  google.maps.event.addDomListener(document, 'click', function(e) {

    if ((e.target.parentElement.className !== 'pac-container') && (e.target.parentElement.className !== 'pac-item') && (e.target.tagName !== 'INPUT')) {

      results.style.display = 'none';
    }
  });

  autocompleteService = new google.maps.places.AutocompleteService();
  placesService = new google.maps.places.PlacesService(map);
}

// Get place predictions
function getPlacePredictions(search) {

  autocompleteService.getPlacePredictions({
    input: search,
    types: ['establishment', 'geocode']
  }, callback);
}

// Get place details
function getPlaceDetails(placeId) {

  var request = {
    placeId: placeId
  };

  placesService.getDetails(request, function(place, status) {

    if (status === google.maps.places.PlacesServiceStatus.OK) {

      var center = place.geometry.location;
      var marker = new google.maps.Marker({
        position: center,
        map: map
      });

      map.setCenter(center);

      // Hide autocomplete results
      results.style.display = 'none';
    }
  });
}

// Place search callback
function callback(predictions, status) {

  // Empty results container
  results.innerHTML = '';

  // Place service status error
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    results.innerHTML = '<div class="pac-item pac-item-error">Your search returned no result. Status: ' + status + '</div>';
    return;
  }

  // Build output with custom addresses
  results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My home address</div>';
  results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My work address</div>';

  // Build output for each prediction
  for (var i = 0, prediction; prediction = predictions[i]; i++) {

    // Insert output in results container
    results.innerHTML += '<div class="pac-item" data-placeid="' + prediction.place_id + '" data-name="' + prediction.terms[0].value + '"><span class="pac-icon pac-icon-marker"></span>' + prediction.description + '</div>';
  }

  var items = document.getElementsByClassName("pac-item");

  // Results items click
  for (var i = 0, item; item = items[i]; i++) {

    item.onclick = function() {

      if (this.dataset.placeid) {
        getPlaceDetails(this.dataset.placeid);
      }
    };
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

body,
html {
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

#map-canvas {
  height: 130px;
  margin-bottom: 10px;
}

table {
  border-collapse: collapse;
  margin-left: 20px;
}

table td {
  padding: 3px 5px;
}

label {
  display: inline-block;
  width: 160px;
  font-size: 11px;
  color: #777;
}

input {
  border: 1px solid #ccc;
  width: 170px;
  padding: 3px 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.pac-container {
  background-color: #fff;
  z-index: 1000;
  border-radius: 2px;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 350px;
}

.pac-icon {
  width: 15px;
  height: 20px;
  margin-right: 7px;
  margin-top: 6px;
  display: inline-block;
  vertical-align: top;
  background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
  background-size: 34px;
}

.pac-icon-marker {
  background-position: -1px -161px;
}

.pac-item {
  cursor: pointer;
  padding: 0 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 30px;
  vertical-align: middle;
  text-align: left;
  border-top: 1px solid #e6e6e6;
  color: #999;
}

.pac-item.custom {
  background-color: #FFF9C4;
}

.pac-item:hover {
  background-color: #efefef;
}

.pac-item-error,
.pac-item-error:hover {
  color: #aaa;
  padding: 0 5px;
  cursor: default;
  background-color: #fff;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map-canvas"></div>
<table>
  <tr>
    <td>
      <label for="address">Address:</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="address" placeholder="Enter address" type="text" tabindex="1" />
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div id="results" class="pac-container"></div>
    </td>
  </tr>
</table>

大多数代码都带有注释，因此它应该说明一切.

Most of the code is commented so it should speak for itself.

JSFiddle演示

这篇关于有什么方法可以自定义Google的自动完成地址结果吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！