javascript 如何从 autocomplete.getPlace() 获取 google place api 结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28131661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get google place api results from autocomplete.getPlace()
提问by user1186050
I would like to pass the longitude/latitude results from google the places api to my MVC application action route values. I'm not sure how to get it to my route values or how to return the javascript to the html values. Right now
我想将 google the place api 的经度/纬度结果传递给我的 MVC 应用程序操作路由值。我不确定如何将其获取到我的路由值或如何将 javascript 返回到 html 值。现在
var result = autocomplete.getPlace();
is returning an undefined value. So it doesn't even look like its working even though the autocomplete for places is working fine.
正在返回一个未定义的值。因此，即使地点的自动完成功能工作正常，它甚至看起来也不像是在工作。
var input = document.getElementById('location');
var options = {
types: ['(cities)'],
componentRestrictions: { country: "us" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
var t = 2;
var result = autocomplete.getPlace(); //result is undefined
var i = 1;
//var lat = result.geometry.location.lat;
//var lon = result.geometry.location.lon;
Here is my form that has the input box and script tag where the location is found. I'm trying to get the lon/lat values to the route values 5,6
这是我的表单，其中包含找到位置的输入框和脚本标记。我正在尝试将 lon/lat 值设为路线值 5,6
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places"></script>
@{
var routeValues = new RouteValueDictionary();
routeValues.Add("Longitude", "5");
routeValues.Add("Latitude", "6");
}
@using (Html.BeginForm("Results", "Home", routeValues, FormMethod.Post))
{
<p>
<input type="text" name="location" id="location" placeholder="Search For A Studio" />
</p>
<p>
<input class="btn btn-primary btn-lg" value='Submit' type="submit"/>
</p>
}
Here is my action in the controller
这是我在控制器中的操作
public ActionResult Results(string longitude, string latitude)
{
var repo = new YogaSpaceRepository();
/// 1000 Ocean Ave
DbGeography myLocation = DbGeography.FromText("POINT(-122.453164 37.723057)");
IQueryable<YogaSpace> spaces = repo.AllWithinDistance(myLocation);
return View(spaces);
}
*UPDATE - I can get autocomplete.getPlace() to return data. I had to put it in a javascript function for the onclick event from my submit button. Hope that's the best way to do it! But I can't seem to get the location (longitude/latitude) data from it. Here is what I have, but lat/lon don't seem to have what I'm looking for or maybe I don't know how to pull the coordinates from these two variables.
*更新 - 我可以得到 autocomplete.getPlace() 来返回数据。我不得不将它放在我提交按钮的 onclick 事件的 javascript 函数中。希望这是最好的方法！但我似乎无法从中获取位置（经度/纬度）数据。这是我所拥有的，但 lat/lon 似乎没有我正在寻找的东西，或者我可能不知道如何从这两个变量中提取坐标。
var input = document.getElementById('location');
var options = {
types: ['(cities)'],
componentRestrictions: { country: "us" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
function getGeometry() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat;
var lon = place.geometry.location.lon;
}
回答by Hammad Tariq
You can get lat and lang from geometry.location object through
您可以通过 geometry.location 对象获取 lat 和 lang
place.geometry.location.lat()
place.geometry.location.lng()
回答by Vadim Gremyachev
You were on the right track but since latand lngare functionsof LatLng object, the following example demonstrates how to get lat/lng:
你在正确的轨道上，但因为lat和lng有功能的LatLng物件，下面的例子演示了如何获得lat/lng：
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lat();
Complete example
完整示例
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
});
var input = /** @type {!HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
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) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
//displayResult(place);
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
//infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.setContent('<div><strong>' + "Location(" + place.geometry.location.lat() + "," + place.geometry.location.lng() + ")" + '</strong><br>');
infowindow.open(map, marker);
});
} html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#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;
} <input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap"
async defer></script>