使用具有自动完成功能的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']); }); }); });
谢谢!
在这里有很多类似的问题,但没有一个匹配这个.
解决方法@H_404_20@
您可以使用
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>
这个例子已经有了一些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>