Javascript 如何从autocomplete.getPlace（）获取GooglePlaceAPI结果

我想将google places api的经度/纬度结果传递给我的MVC应用程序操作路径值。我不知道如何将它转换为路由值，或者如何将javascript返回到html值。现在

var result = autocomplete.getPlace();

正在返回未定义的值。因此，即使位置的自动完成功能运行良好，它看起来也不起作用

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;

这是我的表单，它有一个输入框和脚本标记，可以在其中找到位置。我试图将lon/lat值转换为路线值5,6

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&amp;sensor=false&amp;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>
}

---

您可以通过geometry.location对象获取lat和lang

place.geometry.location.lat()
place.geometry.location.lng()

---

您的思路是正确的，但由于

lat

和

lng

是的函数，下面的示例演示如何获取

lat/lng

：

var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lat();

完整示例

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13
});
变量输入=/**@type{！HTMLInputElement}*/(
document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-29）
});
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
返回；
}
//显示结果（地点）；
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；//为什么是17？因为它看起来不错。
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize：新的google.maps.Size（35,35）
}));
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
//infowindow.setContent（“”+place.name+”
“+地址）；
infowindow.setContent（“”+”位置（“+place.geometry.Location.lat（）+”，“+place.geometry.Location.lng（）+”）”+”
”；
信息窗口。打开（地图、标记）；
});
}

html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
.控制{
边缘顶部：10px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：300px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac集装箱{
字体系列：Roboto；
}

---

我知道这是一个老问题，但应该对其他人有用

要获得几何特性，需要为自动完成对象设置“字段”，如下所示：

autocomplete.setFields(['address_component', 'geometry']);

获取组件和几何体的详细信息

这对于限制您获得的数据数量以及您将通过谷歌API付费非常重要

请阅读以下内容：

对于getPlace（）结果：

---

搜索

碎片，伦敦桥街，英国伦敦

：（如果几何体未定义…但有时会发生什么？如果几何体未定义…但有时会发生什么？

var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lat();

autocomplete.setFields(['address_component', 'geometry']);