使用具有自动完成功能的Google地图搜索框：
如果用户输入显示结果的名称,然后在选择实际结果之前按Enter键,那么’places_matched’事件仍将被触发,并且API为它们选择一个结果.
如何强制用户选择/突出显示一个自动完成结果,或者至少检测他们没有真正选择结果并阻止该请求的地方？
看到这里的jsfiddle：http://jsfiddle.net/4rs1mgno/2/
在文本输入中,输入任何内容,然后按Enter键.我输入“测试”,输出“BYU测试中心”.我不想发生任何事情,因为他们没有真正选择一个选项.
这是从小提琴的JS代码：
$(function(){
var input = document.getElementById('pac-input');
var options = {
keyword: 'establishment'
}
var searchBox = new google.maps.places.SearchBox(input,options);
searchBox.addListener('places_changed',function(evt) {
console.log('changed');
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
places.forEach(function(place) {
$('#output').append(place['name']);
});
});
});
谢谢！
在这里有很多类似的问题,但没有一个匹配这个.
解决方法
您可以使用
Autocomplete Service和
Places Service,并模仿SearchBox的行为.使用getPlacePredictions可以轻松控制搜索字段和搜索结果项目的行为.
这个例子已经有了一些CSS,使它看起来像“SearchBox”一样.当然可以适应和增强.代码被评论,所以它应该说自己.
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 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() {
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: 150px;
width: 200px;
margin-bottom: 10px;
}
.search {
width: 200px;
padding: 5px;
float: left;
}
label {
display: block;
width: 160px;
font-size: 11px;
color: #777;
margin-bottom: 5px;
}
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,.1);
}
.pac-container {
background-color: #fff;
z-index: 1000;
border-radius: 2px;
font-size: 11px;
Box-shadow: 0 2px 6px rgba(0,.3);
-moz-Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
overflow: hidden;
width: 170px;
}
.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:hover {
background-color: #efefef;
}
.pac-item-error,.pac-item-error:hover {
color: #aaa;
padding: 0 5px;
cursor: default;
background-color: #fff;
}
<div class="search"> <label for="address">Address:</label> <input id="address" placeholder="Enter address" type="text" tabindex="1" /> <br /> <div id="results" class="pac-container"></div> </div> <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
