Javascript 使用谷歌地图api一次点击即可获得完整地址和郊区的lat lng
我目前正在使用谷歌地图自动完成。工作得很好,我可以根据需要获得完整地址的lat和lng 然而,我想在一次点击中获得该完整地址的郊区lat lng/邮政编码。怎么用? 我的代码与的代码99%相同,只是更改了html元素ID和其他内容Javascript 使用谷歌地图api一次点击即可获得完整地址和郊区的lat lng,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我目前正在使用谷歌地图自动完成。工作得很好,我可以根据需要获得完整地址的lat和lng 然而,我想在一次点击中获得该完整地址的郊区lat lng/邮政编码。怎么用? 我的代码与的代码99%相同,只是更改了html元素ID和其他内容 <script> var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name
<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(@Model.countryLatitude, @Model.countryLongitude),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create a marker
var latlng = new google.maps.LatLng(6.9167, 79.8473);
var input = document.getElementById('fullAddress');
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
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
infowindow.close();
marker.setVisible(false);
//input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// 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(15);
}
marker.setIcon(({
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);
})
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById('latitude').value = place.geometry.location.lat();
document.getElementById('longitude').value = place.geometry.location.lng();
for (var component in componentForm) {
document.getElementById(component).value = '';
//document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
var placeSearch,自动完成;
变量组件形式={
街道编号:“短名称”,
路线:'long_name',
地点:'long_name',
行政区域级别1:“短名称”,
国家:'long_name',
邮政编码:“短名称”
};
函数初始化(){
变量映射选项={
中心:新的google.maps.LatLng(@Model.countryLatitude,@Model.countryLongitude),
缩放:3,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map_canvas”),
地图选项);
//创建一个标记
var latlng=新的google.maps.latlng(6.9167,79.8473);
var input=document.getElementById('fullAddress');
autocomplete=newgoogle.maps.places.autocomplete(输入);
autocomplete.bindTo('bounds',map);
var infowindow=new google.maps.infowindow();
var marker=new google.maps.marker({
地图:地图
});
google.maps.event.addListener(自动完成,'place\u changed',函数(){
fillInAddress();
infowindow.close();
marker.setVisible(假);
//input.className='';
var place=autocomplete.getPlace();
如果(!place.geometry){
//通知用户未找到该位置并返回。
input.className='notfound';
返回;
}
//如果该地点有几何图形,则将其显示在地图上。
if(place.geometry.viewport){
map.fitBounds(place.geometry.viewport);
}否则{
地图。设置中心(地点。几何。位置);
map.setZoom(15);
}
marker.setIcon(({
url:place.icon,
大小:新谷歌地图大小(71,71),
来源:新google.maps.Point(0,0),
主播:新google.maps.Point(17,34),
scaledSize:新的google.maps.Size(35,35)
}));
标记器.设置位置(位置.几何.位置);
marker.setVisible(true);
})
}
//[开始区域\填写表格]
函数fillInAddress(){
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace();
document.getElementById('latitude')。value=place.geometry.location.lat();
document.getElementById('longitude')。value=place.geometry.location.lng();
for(componentForm中的var组件){
document.getElementById(组件).value='';
//document.getElementById(组件).disabled=false;
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于(变量i=0;i
好的,我找到了一个解决方案,虽然不理想,但它很有效
一旦我从google自动完成功能中填写郊区和邮政编码字段,我需要使用以下url发出另一个请求:
有了这个,我也可以得到郊区的经度和纬度。显示您的响应处理代码,并更好地解释您需要它做什么。我刚刚编辑了这个问题。除了完整地址的纬度和经度之外,我还需要属于完整地址的郊区的纬度和经度。您需要根据第一个请求的结果提出不同的请求,所以无法在同一个请求上获得所有信息?