Question

我尝试创建的主页只有一个Google地方搜索栏的搜索栏。我想在下一页显示谷歌地图结果以及他们搜索的城市。

我只找到了如何隐藏Google地图的搜索框和用户界面的示例。

有没有办法使用谷歌地图＆amp;放置api但隐藏地图并保留搜索框中的搜索功能？

Answer 1

您可以将自动填充搜索栏与地图分开。

请参阅：https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['places']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Answer 2

您不需要google.maps.Map个对象来使用Places SearchBox

代码段

function initAutocomplete() {
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}
#pac-input:focus {
  border-color: #4d90fe;
}
.pac-container {
  font-family: Roboto;
}
#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}
#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
#target {
  width: 345px;
}

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

是否可以隐藏Google地图但保留搜索栏？

2 个答案: