JavaScript获取用户所在城市及地理位置-前端开发

JavaScript获取用户所在城市及地理位置可以通过浏览器的Geolocation API或第三方API实现。以下为详细攻略：

JavaScript获取用户所在城市及地理位置可以通过浏览器的Geolocation API或第三方API实现。以下为详细攻略：

1. 使用浏览器的Geolocation API

1.1 获取经纬度

使用Geolocation API可以获取用户的经纬度信息，从而进一步获取用户所在城市等位置信息。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('经度:', longitude, '纬度:', latitude);
  }, function() {
    console.log('获取位置信息失败！');
  });
} else {
  console.log('浏览器不支持Geolocation API！');
}

如上述代码所示，首先判断浏览器是否支持Geolocation API。若支持，则调用getCurrentPosition方法获取经纬度信息，并在回调函数中处理经纬度数据。

1.2 使用逆地理编码获取城市名

用户所在城市可以通过使用逆地理编码API将用户的经纬度信息转换为具体地址，并从中提取城市信息。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({'location': {lat: latitude, lng: longitude}}, function(results, status) {
      if (status === 'OK') {
        if (results[0]) {
          let city = '';
          for (let i = 0; i < results[0].address_components.length; i++) {
            if (results[0].address_components[i].types[0] === 'locality' || results[0].address_components[i].types[0] === 'administrative_area_level_1') {
              city = results[0].address_components[i].long_name;
            }
          }
          console.log('城市:', city);
        } else {
          console.log('未找到地址信息！');
        }
      } else {
        console.log('逆地理编码失败！');
      }
    });
  }, function() {
    console.log('获取位置信息失败！');
  });
} else {
  console.log('浏览器不支持Geolocation API！');
}

在上述代码中，使用Google Maps JavaScript API中的Geocoder类将经纬度信息进行逆地理编码。成功获取地址信息后，遍历地址组件，找到类型为“locality”或“administrative_area_level_1”的组件，即可获取城市名称。

2. 使用第三方API

使用第三方API也可以获取用户所在位置信息，常见的API包括百度地图API、高德地图API等。以百度地图API为例：

//加载百度地图API
const BMap = window.BMap;
const geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
  if(this.getStatus() === BMAP_STATUS_SUCCESS) {
    const point = r.point;
    const geoc = new BMap.Geocoder();
    geoc.getLocation(point, function(rs){
      const addComp = rs.addressComponents;
      console.log('城市:', addComp.city);
    });   
  } else {
    console.log('获取位置信息失败！');
  }        
},{enableHighAccuracy: true});

使用百度地图API的Geolocation类获取经纬度信息，然后使用Geocoder类将经纬度信息转换为地址信息。从地址信息中提取城市名称即可。

示例说明

示例1：在网页中显示用户当前所在城市

<html>
  <head>
    <meta charset="UTF-8">
    <title>示例：获取用户所在城市</title>
  </head>
  <body>
    <p id="city"></p>

    <script>
      const cityEl = document.getElementById('city');
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
          const geocoder = new google.maps.Geocoder();
          geocoder.geocode({'location': {lat: latitude, lng: longitude}}, function(results, status) {
            if (status === 'OK') {
              if (results[0]) {
                let city = '';
                for (let i = 0; i < results[0].address_components.length; i++) {
                  if (results[0].address_components[i].types[0] === 'locality' || results[0].address_components[i].types[0] === 'administrative_area_level_1') {
                    city = results[0].address_components[i].long_name;
                  }
                }
                cityEl.innerHTML = city;
              } else {
                console.log('未找到地址信息！');
              }
            } else {
              console.log('逆地理编码失败！');
            }
          });
        }, function() {
          console.log('获取位置信息失败！');
        });
      } else {
        console.log('浏览器不支持Geolocation API！');
      }
    </script>
  </body>
</html>

以上代码将用户所在城市信息显示在了页面中，使用了Google Maps JavaScript API中的Geocoder类进行逆地理编码。

示例2：在控制台输出用户当前所在位置的经纬度以及城市名

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('经度:', longitude, '纬度:', latitude);
    const geoc = new BMap.Geocoder();
    geoc.getLocation(new BMap.Point(longitude, latitude), function(rs){
      const addComp = rs.addressComponents;
      console.log('城市:', addComp.city);
    });   
  }, function() {
    console.log('获取位置信息失败！');
  });
} else {
  console.log('浏览器不支持Geolocation API！');
}

以上代码将用户的经纬度信息以及城市名输出在了控制台中，使用了百度地图API进行位置信息获取。