我对JS并不是很坚强,并且在理解Google文档方面遇到困难,但是我很少放弃并且通常可以弄清楚东西,但是我对此一无所知。
如何为特定业务类型自动完成?我只想填写“药房”的建议。
HTML
<div class="wrap clearfix">
<input type="text" id="latitude" value="35.4794" />
<input type="text" id="longitude" value="-97.5017" />
<label>Pharmacy Search</label>
<input type="text" id="textfield" />
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon" />
<p id="place-name" class="title"></p>
<p id="place-address"></p>
</div>
</div>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=places&ver=4.9.8'></script>
CSS
.clearfix:after {
content: '.';
visibility: hidden;
display: block;
height: 0;
line-height: 0;
clear: both;
}
.wrap {
display: block;
margin: 20px auto;
max-width: 70%;
border: 1px solid #ddd;
padding: 20px;
line-height: 1.5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #555;
}
label {
display: block;
position: relative;
width: 100%;
font-size: 16px;
}
input {
appearance: none;
-webkit-appearance: none;
display: block;
position: relative;
width: 100%;
border: 1px solid #ddd;
z-index: 2;
padding: 0 5px;
margin: 0 0 20px;
line-height: 30px;
height: 32px;
font-size: 16px;
font-family: inherit;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#map {
display: none;
position: relative;
width: 100%;
height: 330px;
}
#infowindow-content p {
display: block;
margin-bottom: 5px;
}
JS
function initMap() {
var input = document.getElementById('textfield');
var autocompleteoptions = {
types: ['establishment']
};
var latitude = parseInt($('#latitude').val());
var longitude = parseInt($('#longitude').val());
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: latitude,
lng: longitude
},
zoom: 6
});
var autocomplete = new google.maps.places.Autocomplete(input, autocompleteoptions);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo('bounds', map);
autocomplete.setComponentRestrictions({
'country': ['us']
});
// Set the data fields to return when the user selects a place.
autocomplete.setFields(
["name", "geometry", "icon", "formatted_address"]
);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
$('#map').hide();
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
$('#map').show();
infowindow.open(map, marker);
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = place.formatted_address;
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
initMap();