无需手动输入即可自动完成反向地理编码的数据
Posted
技术标签:
【中文标题】无需手动输入即可自动完成反向地理编码的数据【英文标题】：autocomplete the data for Reverse Geocoding without manual input 【发布时间】：2014-08-07 12:30:33 【问题描述】：这是来自谷歌 api 地图的反向地理编码。我的问题是..
可以删除或隐藏<div id="panel"> 并从当前用户位置获取数据，而无需用户按下按钮来反向地理编码？
我只想显示用户的地址而不显示高度和经度..
谢谢
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
html, body, #map-canvas
height: 100%;
margin: 0px;
padding: 0px
#panel
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize()
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions =
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function codeLatLng()
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode('latLng': latlng, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
if (results[1])
map.setZoom(11);
marker = new google.maps.Marker(
position: latlng,
map: map
);
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
else
alert('No results found');
else
alert('Geocoder failed due to: ' + status);
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#panel
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
#latlng
width: 225px;
</style>
</head>
<body>
<div id="panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input type="button" value="Reverse Geocode" onclick="codeLatLng()">
</div>
<div id="map-canvas"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：是的你可以。
希望您知道HTML5 Geolocation，这将有助于您获取用户的当前位置。
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(function (position)
revereGeoCode(position.coords.latitude, position.coords.longitude);
);
else
// make sure to handle the failure
使用这个应用你的概念，摆脱手动获取 lat 和 lng。
完整的代码如下所示
var geocoder;
var map;
var marker;
var infowindow = new google.maps.InfoWindow();
function initializeMap()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(function (position)
revereGeoCode(position.coords.latitude, position.coords.longitude);
);
else
console.log("er")
// make sure to handle the failure
var mapOptions =
zoom: 8,
center: new google.maps.LatLng(40.730885, -73.997383),
mapTypeId: 'roadmap'
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function revereGeoCode(lat, lng)
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode(
'latLng': latlng
, function (results, status)
if (status == google.maps.GeocoderStatus.OK)
if (results[1])
// place your marker coding
map.setZoom(11);
marker = new google.maps.Marker(
position: latlng,
map: map
);
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
else
alert('No results found');
else
alert('Geocoder failed due to: ' + status);
);
google.maps.event.addDomListener(window, 'load', initializeMap);
JSFiddle
【讨论】：
谢谢你，我已经复制了上面的代码，并在第一行的 function initializeMap(); 上给了我错误 @user2602047 我已经修好了。立即尝试以上是关于无需手动输入即可自动完成反向地理编码的数据的主要内容，如果未能解决你的问题，请参考以下文章