[英]How to get google place api results from autocomplete.getPlace()
I would like to pass the longitude/latitude results from google the places api to my MVC application action route values.我想将谷歌地点 api 的经度/纬度结果传递给我的 MVC 应用程序操作路由值。 I'm not sure how to get it to my route values or how to return the javascript to the html values.
我不确定如何将其获取到我的路由值或如何将 javascript 返回到 html 值。 Right now
马上
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. *更新 - 我可以得到 autocomplete.getPlace() 来返回数据。 I had to put it in a javascript function for the onclick event from my submit button.
我不得不将它放在我提交按钮的 onclick 事件的 javascript 函数中。 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.
这是我所拥有的,但 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;
}
You can get lat and lang from geometry.location object through您可以通过 geometry.location 对象获取 lat 和 lang
place.geometry.location.lat()
place.geometry.location.lng()
You were on the right track but since lat
and lng
are functions of LatLng object , the following example demonstrates how to get lat/lng
:您在正确的轨道上,但由于
lat
和lng
是LatLng object 的函数,以下示例演示了如何获取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>
I know it's an old question, but should be useful to others.我知道这是一个老问题,但应该对其他人有用。
To get geometry proprieties, you need to set "fields" for autocomplete object, like this:要获得几何属性,您需要为自动完成对象设置“字段”,如下所示:
autocomplete.setFields(['address_component', 'geometry']);
To get address_component and geometry details.获取 address_component 和几何细节。
This is important to limit the number of data you get and you will billed for by Google APIs.这对于限制您获得的数据数量非常重要,您将通过 Google API 付费。
Read this:读这个:
https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=ja#get_place_information https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=ja#get_place_information
And this, for getPlace() results:这对于 getPlace() 结果:
https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=ja#PlaceResult https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=ja#PlaceResult
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.