谷歌API的反向地理编码 [英] google api reverse geocode
本文介绍了谷歌API的反向地理编码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站上有谷歌地图。用户可以拖动标记，地图将为我输入纬度和经度。见下面的代码。我希望能够从纬度和经度获得地址，并将其放在我的表单地址箱中。
< script src =multi_step_form.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js?callback=initMapasync defer>< / script>
< script type =text / javascript>
var map;
函数initialize（）{
var myLatlng = new google.maps.LatLng（49.25302534866034，-102.04825518471148）;
var myOptions = {
zoom：3，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.HYBRID
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
var marker = new google.maps.Marker（{
draggable：true，
position：myLatlng，
map：map，
title：Your location
}）;
google.maps.event.addListener（marker，'dragend'，function（event）{
document.getElementById（latbox）。value = this.getPosition（）。lat（）;
document.getElementById（lngbox）。value = this.getPosition（）。lng（）;
}）;
}
< / script>
我有另外一段代码来查找我从 https： //203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/ ，但我无法弄清楚如何将它们融合在一起。
< script type =text / javascriptsrc =http://maps.google.com/maps/api ？/ JS传感器=假>< /脚本>
< script type =text / javascript>
var geocoder = new google.maps.Geocoder（）;
var lat =12.1234;
var long =98.7654;
var latlng = new google.maps.LatLng（sLat，sLong）;
geocoder.geocode（{latLng：latlng}，函数（数据，状态）{
if（status == google.maps.GeocoderStatus.OK）{
var add = data [1] .formatted_address; //这是完整地址
alert（add）;
for（var i = 0; i< data [1] .address_components.length; i ++）{
if（results [1] .address_components [i] .types [0] ==administrative_area_level_1）{
alert（results [1] .address_components [i] .short_name）;
}
}
}
））
我的html表单看起来像这样
< div id =map_canvasstyle =width：450px; height：450px; background-color：Black;>< / div>
< div id =latlong>
< p>< input size =20type =textid =latboxname =latplaceholder =在地图上拖动标记或输入纬度>< / p为H.
< p>< input size =20type =textid =lngboxname =lonplaceholder =在地图上拖动标记或输入经度>< / p为H.
< / div>
< input class =text_fieldid =locationboxname =locationplaceholder =Locationtype =text>
任何帮助将不胜感激
解决方案
我会建议在 dragend 事件监听器函数中调用反向地理编码器：
google.maps.event.addListener（marker，'dragend'，function（event）{
document.getElementById（latbox）。value = this.getPosition（）。 lat（）;
document.getElementById（lngbox）。value = this.getPosition（）。lng（）;
var latlng = this.getPosition（）;
geocoder.geocode {
latLng：latlng
}，函数（数据，状态）{
if（status == google.maps.GeocoderStatus.OK）{
var add = data [ 1] .formatted_address; //这是完整的地址
// alert（add）;
for（var i = 0; i< data [1] .address_components.length; i ++）{
if（data [1] .address_components [i] .types [0] ==administrative_area_level_1）{
document.getEl ementById（'locationbox'）。value = data [1] .address_components [i] .short_name;
}
}
}
}）;
}）;
代码段：
var map; function initialize（）{var geocoder = new google.maps.Geocoder（）; var myLatlng = new google.maps.LatLng（49.25302534866034，-102.04825518471148）; var myOptions = {zoom：3，center：myLatlng，mapTypeId：google.maps.MapTypeId.HYBRID}; map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; var marker = new google.maps.Marker（{draggable：true，position：myLatlng，map：map，title：Your location}）; google.maps.event.addListener（marker，'dragend'，function（event）{document.getElementById（latbox）。value = this.getPosition（）。lat（）; document.getElementById（lngbox）。value = this.getPosition（）。lng（）; var latlng = this.getPosition（）; geocoder.geocode（{latLng：latlng}，function（data，status）{if（status == google.maps.GeocoderStatus。 （var i = 0; i< data [1] .address_components.length; i ++）{if （data [1] .address_components [i] .types [0] ==administrative_area_level_1）{document.getElementById（'locationbox'）。value = data [1] .address_components [i] .short_name;}}}}） ;}）;} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：// < / div>< input class =text_fieldid =locationboxname =locationplaceholder =Locationtype =text>
I Have a google map on my site. Users can drag the marker and the map will input the lat and lon into a form for me. See code below. I want to be able to get the address from the lat and lon and put it into my form at "locationbox".
<script src="multi_step_form.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(49.25302534866034,-102.04825518471148);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
}
</script>
I have another bit of code to look up the address that I got from https://203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/ but I just can't figure out how to blend them together.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var lat = "12.1234";
var long = "98.7654";
var latlng = new google.maps.LatLng(sLat, sLong);
geocoder.geocode({"latLng":latlng},function(data,status){
if(status == google.maps.GeocoderStatus.OK){
var add = data[1].formatted_address; //this is the full address
alert(add);
for(var i=0; i<data[1].address_components.length; i++){
if(results[1].address_components[i].types[0] == "administrative_area_level_1"){
alert(results[1].address_components[i].short_name);
}
}
}
})
My html form looks like this
<div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div>
<div id="latlong">
<p><input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude"></p>
<p><input size="20" type="text" id="lngbox" name="lon" placeholder="Drag the marker on the map or type in the longitude"></p>
</div>
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text" >
Any help would be appreciated
解决方案
I would suggest calling the reverse geocoder in the dragend event listener function:
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
var latlng = this.getPosition();
geocoder.geocode({
"latLng": latlng
}, function (data, status) {
if (status == google.maps.GeocoderStatus.OK) {
var add = data[1].formatted_address; //this is the full address
// alert(add);
for (var i = 0; i < data[1].address_components.length; i++) {
if (data[1].address_components[i].types[0] == "administrative_area_level_1") {
document.getElementById('locationbox').value = data[1].address_components[i].short_name;
}
}
}
});
});
code snippet:
var map;
function initialize() {
var geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(49.25302534866034, -102.04825518471148);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
var latlng = this.getPosition();
geocoder.geocode({
"latLng": latlng
}, function(data, status) {
if (status == google.maps.GeocoderStatus.OK) {
var add = data[1].formatted_address; //this is the full address
// alert(add);
for (var i = 0; i < data[1].address_components.length; i++) {
if (data[1].address_components[i].types[0] == "administrative_area_level_1") {
document.getElementById('locationbox').value = data[1].address_components[i].short_name;
}
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div>
<div id="latlong">
<p>
<input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude">
</p>
<p>
<input size="20" type="text" id="lngbox" name="lon" placeholder="Drag the marker on the map or type in the longitude">
</p>
</div>
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text">
这篇关于谷歌API的反向地理编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
