关于这方面有很多问题，并提供相关文档，但似乎我找不到我试图解决的用例的解决方案。
我想做什么：
所以它基本上会延伸the places autocomplete并提及最后一个子弹
-OR -
使用geocomplete library，更具体地说是the form example，因为它已经提供了下面列出的所有需要的详细信息。我缺少的是如何不在搜索上放置标记，以及如何仅在用户点击它时从网站获取详细信息。
我希望从点击时获得的详细信息（可通过地理填写直接获得）包含：
更新
使用地理填充库，您可以绑定点击事件，如下所示：
$("#geocomplete_input_field").bind("geocode:click", function(event, latLng){
$("input[name=lat]").val(latLng.lat());
$("input[name=lng]").val(latLng.lng());
});
因此，我们获得了纬度和经度。但是你也可以获得格式化的地址，名称和网址，如表单示例中所示吗？
答案 0 :(得分：1)
嗯，您不需要任何外部库来完成此任务。由于一切都已完成（代码），您只需添加“POI点击事件”即可。它会侦听POI图标上的click事件，然后将placeId用于您想要实现的任何内容。在您的情况下，您想要获取这些：name，formatted_addres，url，lat，lng和网站。
在我将为您提供的示例中，我刚刚创建了一个构造函数“ClickEventHandler”。您可以查看 POI Click 以获取示例和文档。
var ClickEventHandler = function(map, origin) {
this.origin = origin;
this.map = map;
this.placesService = new google.maps.places.PlacesService(map);
this.infowindow = new google.maps.InfoWindow();
// Listen for clicks on the map.
this.map.addListener('click', this.handleClick.bind(this));
};
然后，在init（）函数中创建一个新实例并提供参数：map和origin。
var clickHandler = new ClickEventHandler(map, {lat: -33.8688, lng: 151.2195});
在'ClickEventHandler'对象中，创建一个接受参数'placeid'的原型'getPlaceInformation'。您需要在此部分中使用 Google Maps Javascript API Place Details 。在Google Maps Javascript API放置详细信息 getDetails 方法中，您将使用您提供的placeid作为来自您创建的上一个函数（getPlaceInformation）的参数。 getDetails 方法需要2个参数：地点和状态。此方法从您提供的placeid获取所有详细信息。获得状态==='确定'后，它会返回您期望的数据。
ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
this.placesService.getDetails({placeId: placeId}, function(place, status) {
if (status === 'OK') {
}
});
};
下面的工作示例（包含从POI提供的infowindow和输入元素值的详细信息）：
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// 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);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
var clickHandler = new ClickEventHandler(map, {lat: -33.8688, lng: 151.2195});
}
var ClickEventHandler = function(map, origin) {
this.origin = origin;
this.map = map;
this.placesService = new google.maps.places.PlacesService(map);
this.infowindow = new google.maps.InfoWindow();
// Listen for clicks on the map.
this.map.addListener('click', this.handleClick.bind(this));
};
ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
var me = this;
this.placesService.getDetails({placeId: placeId}, function(place, status) {
me.infowindow.close();
if (status === 'OK') {
var inputNames = [ 'name', 'formatted_address', 'url', 'website' ];
for ( var val in inputNames ) {
document.getElementById(inputNames[val]).value = place[inputNames[val]];
}
document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lng').value = place.geometry.location.lng();
var template = '<div id="infoContent">';
template += '<ul>';
template += '<li><span>Name: </span>'+place.name+'</li>';
template += '<li><span>Formatted address: </span>'+place.name+'</li>';
template += '<li><span>Google Maps URL: </span><a href="'+place.url+'" target="_blank">'+place.url+'</a></li>';
template += '<li><span>Latitude: </span>'+place.geometry.location.lat()+'</li>';
template += '<li><span>Longitude: </span>'+place.geometry.location.lng()+'</li>';
template += '<li><span>Website: </span><a href="'+place.website+'" target="_blank">'+place.website+'</a></li>';
template += '</ul>';
me.infowindow.setContent(template);
me.infowindow.setPosition(place.geometry.location);
me.infowindow.open(me.map);
}
});
};
ClickEventHandler.prototype.handleClick = function(event) {
//console.log('You clicked on: ' + event.latLng);
// If the event has a placeId, use it.
if (event.placeId) {
//console.log('You clicked on place:' + event.placeId);
// Calling e.stop() on the event prevents the default info window from
// showing.
// If you call stop here when there is no placeId you will prevent some
// other map click event handlers from receiving the event.
event.stop();
this.getPlaceInformation(event.placeId);
}
}; #map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#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: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
#infoContent {
width:100%;
float:left;
overflow:hidden;
display:block;
}
#infoContent > ul {
width:100%;
float:left;
overflow:hidden;
display:block;
}
#infoContent > ul > li {
width:100%;
float:left;
overflow:hidden;
clear:both;
font-size:12px;
}
#infoContent > ul > li span {
font-weight:bold;
}
#infoContent > ul > li a {
text-decoration:none;
}
#myForm {
width:100%;
float:left;
overflow:hidden;
display:block;
box-sizing:border-box;
padding: 10xp;
}
#myForm fieldset {
display:block;
clear:both;
float:left;
border:none;
}
#myForm fieldset label {
width:100%;
float:left;
overflow:hidden;
display:block;
clear:both;
line-height:24px;
}
#myForm fieldset input {
width: 100%;
float:left;
overflow:hidden
display:block;
clear:both;
line-height: 24px;
padding: 0 5px;
} <input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<form id="myForm">
<fieldset>
<label>Name:</label>
<input type="text" name="name" id="name" />
</fieldset>
<fieldset>
<label>Formatted address:</label>
<input type="text" name="formatted_address" id="formatted_address" />
</fieldset>
<fieldset>
<label>URL to Google Maps:</label>
<input type="text" name="url" id="url" />
</fieldset>
<fieldset>
<label>Latitude:</label>
<input type="text" name="lat" id="lat" />
</fieldset>
<fieldset>
<label>Longitude:</label>
<input type="text" name="lng" id="lng" />
</fieldset>
<fieldset>
<label>Website:</label>
<input type="text" name="website" id="website" />
</fieldset>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&callback=initAutocomplete"
async defer></script>
希望它有帮助并且编码愉快！