在谷歌地图中从经度和纬度获取位置地址 [英] Get location address from Latitude and Longitude in google maps
问题描述
我希望点击Google地图后，让纬度和经度从他们处获得地点位置，并将其放在输入＃searchTextField 文件中。我做了什么？
我尝试过，但不适合我：
DEMO： http://jsfiddle.net/DXkZJ/
< input id =searchTextFieldtype =textsize =50style =text-align：left; width：357px; direction：ltr ;>
< div id =map_canvasstyle =height：350px; width：500px; margin：0.6em;>< / div>
$ b $（函数（）{
var lat = 44.88623409320778，
ng = -87.86480712897173，
latlng = new google.maps .LatLng（lat，lng），
image ='http://www.google.com/intl/zh-CN/mapfiles/ms/micons/blue-dot.png';
// zoomControl：true，
// zoomControlOptions：google.maps.ZoomControlStyle.LARGE，
var mapOptions = {
center：new google.maps.LatLng（lat，lng ），
zoom：13，
mapTypeId：google.maps.MapTypeId.ROADMAP，
panControl：true，
panControlOptions：{
position：google.maps.ControlPosition .TOP_RIGHT
}，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.LARGE，
position：google.maps.ControlPosition.TOP_left
}
}，
map = new google.maps.Map（document.getElementById（'map_canvas'），m
marker = new google.maps.Marker（{
position：latlng，
map：map，
icon：image
}）;
var input = document.getElementById（'searchTextField'）;
var autocomplete = new google.maps.places.Autocomplete（input，{
types：[geocode]
}）;
autocomplete.bindTo（'bounds'，map）;
var infowindow = new google.maps.InfoWindow（）;
google.maps.event.addListener（autocomplete，'place_changed'，function（event）{
infowindow.close（）;
var place = autocomplete.getPlace（）;
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）;
} else {
map.setCenter（place.geometry.location）;
map.setZoom（17）;
}
moveMarker（place.name，place.geometry.location）;
alert（place.name）; $ b $（'。MapLat'）。val（place.geometry.location.lat（））; $ b $（'。MapLon'）。val（place.geometry.location.lng（））;
}）;
google.maps.event.addListener（map，'click'，function（event）{
$（'。MapLat'）。val（event.latLng.lat（））;
$（'。MapLon'）。val（event.latLng.lng（））;
alert（event.latLng.place.name）
}）;
$（＃searchTextField）。focusin（function（）{
$（document）.keypress（function（e）{
if（e.which == 13）{
返回false;
infowindow.close（）;
var firstResult = $（。pac-container .pac-item：first）。text（）;
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{
address：firstResult
}，function（results，status）{
if（status == google。 maps.GeocoderStatus.OK）{
var lat = results [0] .geometry.location.lat（），
lng = results [0] .geometry.location.lng（），
placeName = results [0] .address_components [0] .long_name，
latlng = new google.maps.LatLng（lat，lng）;
moveMarker（placeName，latlng）;
$（ 输入）VAL（FIRSTRESULT）。
alert（firstResult）
}
}）;
}
}）;
}）;
函数moveMarker（placeName，latlng）{
marker.setIcon（image）;
marker.setPosition（latlng）;
infowindow.setContent（placeName）;
//infowindow.open(map，marker）;
}
}）;
<好的，所以首先你需要反向地理编码，而不是常规的地理编码，因为你从经纬度转向地址而不是反过来（参见 reference ）。其次，你的关键侦听器永远不会做任何事情，因为它几乎立即声明返回false ;在这种情况下，您可能需要 event.stopPropogation（）。此外，谷歌地图将拦截你的鼠标点击深度在DOM树比文档，因此事件将永远不会被高度倾听。
因此，我所做的是将您的地理编码转换为反向地理编码，并将文档侦听器中的代码移动到Google侦听器中。如果您想保留添加在焦点上的侦听器的行为，则可以简单地在地图对象上创建一个新的侦听器。这是工作jsfiddle展示这些变化，希望这有助于。
I want after click on google map and getting Latitude and Longitude get location place from they and put it (address) in filed input#searchTextField. What do i do?
I tried as, but don't work for me:
DEMO: http://jsfiddle.net/DXkZJ/
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>
$(function () {
var lat = 44.88623409320778,
lng = -87.86480712897173,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
alert(place.name);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
alert(event.latLng.place.name)
});
$("#searchTextField").focusin(function () {
$(document).keypress(function (e) {
if (e.which == 13) {
return false;
infowindow.close();
var firstResult = $(".pac-container .pac-item:first").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"address": firstResult
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("input").val(firstResult);
alert(firstResult)
}
});
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});
Ok, so firstly you need reverse geocoding, not regular geocoding, because you are going from a latitude/longitude into an address rather than the other way around (see reference). Secondly your key listener would never do anything because it almost immediately states return false; in this case you probably want event.stopPropogation(). Furthermore google maps will intercept your mouse clicks at a greater depth in the DOM tree than document, so the event will never be listened that highly anyway.
So what I did was to change your geocode into a reverse geocode, as well as move the code in the document listener into the google listener. If you wanted to retain the behaviour of the listener being added on focus, you can simply create a new listener on the map object. Here is a working jsfiddle demonstrating these changes, hopefully this helps.
这篇关于在谷歌地图中从经度和纬度获取位置地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
