Javascript 使用地理位置获取城市名称_Javascript_Html_Geolocation

Javascript 使用地理位置获取城市名称

javascript html geolocation

Javascript 使用地理位置获取城市名称,javascript,html,geolocation,Javascript,Html,Geolocation,我设法使用基于HTML的地理位置来获取用户的纬度和经度 //Check if browser supports W3C Geolocation API if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successFunction, errorFunction); } //Get latitude and longitude; function successFunction(position)

我设法使用基于HTML的地理位置来获取用户的纬度和经度

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get latitude and longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}

我想显示城市名称，似乎获得它的唯一方法是使用反向地理定位API。我阅读了谷歌关于反向地理定位的文档，但我不知道如何在我的网站上获得输出

我不知道如何使用这个：

“http://maps.googleapis.com/maps/api/geocode/json?latlng=“+lat+”、“+long+”&sensor=true”

在页面上显示城市名称

我怎样才能做到这一点呢？

您可以使用谷歌API做类似的事情

请注意，您必须包含谷歌地图库，才能使其正常工作。GoogleGeocoder会返回很多地址组件，所以你必须有根据地猜测哪一个会拥有这个城市

“行政区域级别1”通常是你要找的，但有时地方就是你要找的城市

无论如何，更多关于谷歌响应类型的详细信息可以在这里找到和找到

下面是实现该技巧的代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html>


反向地理编码
var地理编码器；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（successFunction，errorFunction）；
} 
//得到纬度和经度；
功能成功功能（位置）{
var lat=位置坐标纬度；
var lng=位置坐标经度；
codeLatLng（lat，lng）
}
函数errorFunction（）{
警报（“地理编码器失败”）；
}
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
}
功能代码LATLNG（lat，lng）{
var latlng=新的google.maps.latlng（lat，lng）；
geocoder.geocode（{'latLng'：latLng}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
console.log（结果）
如果（结果[1]）{
//格式化地址
警报（结果[0]。格式化的\u地址）
//查找国家名称
对于（var i=0；i您可以使用googleapi执行类似的操作
请注意，你必须包括谷歌地图库，这是工作。谷歌地理编码器返回了大量的地址组件，所以你必须作出一个有根据的猜测，哪一个将有城市
“行政区域级别1”通常是你要找的，但有时地方就是你要找的城市
无论如何，更多关于谷歌响应类型的详细信息可以在这里找到和找到
下面是实现该技巧的代码：
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html> 


反向地理编码
var地理编码器；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（successFunction，errorFunction）；
} 
//得到纬度和经度；
功能成功功能（位置）{
var lat=位置坐标纬度；
var lng=位置坐标经度；
codeLatLng（lat，lng）
}
函数errorFunction（）{
警报（“地理编码器失败”）；
}
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
}
功能代码LATLNG（lat，lng）{
var latlng=新的google.maps.latlng（lat，lng）；
geocoder.geocode（{'latLng'：latLng}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
console.log（结果）
如果（结果[1]）{
//格式化地址
警报（结果[0]。格式化的\u地址）
//查找国家名称
对于（var i=0；i另一种方法是使用我的服务，它根据用户的当前IP地址返回城市、地区和国家的名称。下面是一个简单的示例：
$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

这里有一个更详细的JSFIDLE示例，它还打印出完整的响应信息，因此您可以查看所有可用的详细信息：
另一种方法是使用my service，它根据用户当前的IP地址返回城市、地区和国家的名称。下面是一个简单的示例：
$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

这里有一个更详细的JSFIDLE示例，它还打印出完整的响应信息，因此您可以看到所有可用的详细信息：
这里是我的更新工作版本，将获得City/Town，看起来json响应中的一些字段被修改了。请参考前面的回答。（多亏了Michal&还有一个参考：
这是我的最新工作版本，将获得City/Town，看起来json响应中的一些字段被修改了。请参考前面的问题答案。（多亏了Michal和另一个参考：

$.ajax({
url:“https://geolocation-db.com/jsonp",
jsonpCallback：“回调”，
数据类型：“jsonp”，
成功：功能（位置）{
$（'#country'）.html（location.country_name）；
$（'#state'）.html（location.state）；
$（'#city'）.html（location.city）；
$（'#latitude'）.html（location.latitude）；
$（'#longitude'）.html（location.longitude）；
$（'#ip'）.html（location.IPv4）；
}
})；

国家：
声明：
城市：
纬度：
经度：
IP:
$.ajax({
url:“https://geolocation-db.com/jsonp",
jsonpCallback：“回调”，
数据类型：“jsonp”，
成功：功能（位置）{
$（'#country'）.html（location.country_name）；
$（'#state'）.html（location.state）；
$（'#city'）.html（location.city）；
$（'#latitude'）.html（location.latitude）；
$（'#longitude'）.html（location.longitude）；
$（'#ip'）.html（location.IPv4）；
}
})；

国家：
声明：
城市：
纬度：
经度：
IP:
您可以使用谷歌地图地理编码API获取城市名称、国家名称、街道名称和其他地理数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {
            console.log(position.coords.latitude)
            console.log(position.coords.longitude)

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                console.log(location)
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>


navigator.geolocation.getCurrentPosition（成功，错误）；
功能成功（职位）{
控制台日志（位置坐标纬度）
console.log（位置.坐标.经度）
地理编码变量https://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+'%2C'+position.coords.longitude+'&language=en'；
$.getJSON（地理编码）.done（函数（位置）{
geolocator.locateByIP(options, function (err, location) {
    console.log(location.address.city);
});

function parseGeoLocationResults(result) {
    const parsedResult = {}
    const {address_components} = result;

    for (var i = 0; i < address_components.length; i++) {
        for (var b = 0; b < address_components[i].types.length; b++) {
            if (address_components[i].types[b] == "street_number") {
                //this is the object you are looking for
                parsedResult.street_number = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "route") {
                //this is the object you are looking for
                parsedResult.street_name = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_1") {
                //this is the object you are looking for
                parsedResult.sublocality_level_1 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_2") {
                //this is the object you are looking for
                parsedResult.sublocality_level_2 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_3") {
                //this is the object you are looking for
                parsedResult.sublocality_level_3 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "neighborhood") {
                //this is the object you are looking for
                parsedResult.neighborhood = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "locality") {
                //this is the object you are looking for
                parsedResult.city = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "administrative_area_level_1") {
                //this is the object you are looking for
                parsedResult.state = address_components[i].long_name;
                break;
            }

            else if (address_components[i].types[b] == "postal_code") {
                //this is the object you are looking for
                parsedResult.zip = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "country") {
                //this is the object you are looking for
                parsedResult.country = address_components[i].long_name;
                break;
            }
        }
    }
    return parsedResult;
}

$(document).ready(function () {
        $('#btnGetIpDetail').click(function () {
            if ($('#txtIP').val() == '') {
                alert('IP address is reqired');
                return false;
            }
            $.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
                 function (result) {
                     alert('City Name: ' + result.city)
                     console.log(result);
                 });
        });
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
    <input type="text" id="txtIP" />
    <button id="btnGetIpDetail">Get Location of IP</button>
</div>

{
    "ip": "64.30.228.118",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "FL",
    "region_name": "Florida",
    "city": "Fort Lauderdale",
    "zip_code": "33309",
    "time_zone": "America/New_York",
    "latitude": 26.1882,
    "longitude": -80.1711,
    "metro_code": 528,
    "suspicious_factors": {
        "is_proxy": false,
        "is_tor_node": false,
        "is_spam": false,
        "is_suspicious": false
    }
}

async function getCountry(lat, long) {
  const { data: { results } } = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${GOOGLE_API_KEY}`);
  const { address_components } = results[0];

  for (let i = 0; i < address_components.length; i++) {
    const { types, long_name } = address_components[i];

    if (types.indexOf("country") !== -1) return long_name;
  }
}

$.get("https://api.astroip.co/?api_key=1725e47c-1486-4369-aaff-463cc9764026", function(response) {
    console.log(response.geo.city, response.geo.country);
});