基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）

下面我来详细讲解一下基于JavaScript实现根据手机定位获取当前具体位置的完整攻略。

下面我来详细讲解一下基于JavaScript实现根据手机定位获取当前具体位置的完整攻略。

准备工作

1. 获取用户地理位置授权。在JavaScript中，我们可以通过navigator.geolocation.getCurrentPosition()方法获取用户的当前位置信息。但是在获取位置信息之前，需要向用户请求获取他们的位置授权。用于请求授权的代码如下：

```javascript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
// 获取到了用户的位置信息，进行后续处理
}

function showError(error) {
// 无法获取用户的位置信息，进行错误处理
}
```

当用户同意授权获取位置信息时，showPosition()函数会被调用并传入一个Position对象，该对象包含有用户的位置信息。当用户拒绝授权或者获取位置信息失败时，showError()函数会被调用。

1. 解析位置信息。位置信息获取到之后，我们还需要将其转换为可读的地址信息。这个工作需要使用到第三方的地图API，例如百度地图API、高德地图API等。

根据位置信息获取地址

下面来介绍如何使用JavaScript根据用户的位置信息获取地址。以百度地图API为例，具体步骤如下：

1. 在百度地图开放平台申请一个开发者账号，并创建一个应用。

2. 在应用管理页面获取AK（Access Key），该AK用于调用百度地图API。

3. 使用JavaScript发送一个GET请求到百度地图API，以获取当前位置的地址信息。代码如下：

```javascript
var ak = '你的百度地图AK';
var lat = position.coords.latitude; // 用户位置的纬度
var lng = position.coords.longitude; // 用户位置的经度

var url = 'https://api.map.baidu.com/geocoder/v2/?output=json&ak=' + ak + '&location=' + lat + ',' + lng;

fetch(url)
.then(response => response.json())
.then(data => {
if (data.status === 0) {
var address = data.result.formatted_address;
// 对地址信息进行处理
}
})
.catch(error => console.error(error));
```

在上面的代码中，我们通过fetch()函数向百度地图API发送了一个GET请求，并将请求的结果转换为JSON格式的数据。请求的URL中包含了我们的AK、用户的纬度和经度等参数。

1. 解析返回的数据。当我们获取到了返回的数据后，需要将其解析为可读的地址信息。代码如下：

```javascript
var addressComponent = data.result.addressComponent;

var province = addressComponent.province; // 省份
var city = addressComponent.city; // 城市
var district = addressComponent.district; // 区/县
var street = addressComponent.street; // 街道
var streetNumber = addressComponent.street_number; // 门牌号

var address = province + city + district + street + streetNumber;
```

在上面的代码中，我们使用了返回数据中的addressComponent对象，该对象包含了地址的详细信息。我们可以通过该对象获取到省份、城市、区/县、街道和门牌号等信息，并将它们拼接成完整的地址。

示例

下面给出两个示例，分别使用了百度地图API和高德地图API来获取用户的地址信息。

示例1：百度地图API

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  var ak = '你的百度地图AK';
  var lat = position.coords.latitude;  // 用户位置的纬度
  var lng = position.coords.longitude;  // 用户位置的经度

  var url = 'https://api.map.baidu.com/geocoder/v2/?output=json&ak=' + ak + '&location=' + lat + ',' + lng;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      if (data.status === 0) {
        var addressComponent = data.result.addressComponent;

        var province = addressComponent.province;  // 省份
        var city = addressComponent.city;  // 城市
        var district = addressComponent.district;  // 区/县
        var street = addressComponent.street;  // 街道
        var streetNumber = addressComponent.street_number;  // 门牌号

        var address = province + city + district + street + streetNumber;
        console.log(address);
      }
    })
    .catch(error => console.error(error));
}

function showError(error) {
  console.log(error.message);
}

示例2：高德地图API

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  var key = '你的高德地图Key';
  var lat = position.coords.latitude;  // 用户位置的纬度
  var lng = position.coords.longitude;  // 用户位置的经度

  var url = 'https://restapi.amap.com/v3/geocode/regeo?key=' + key + '&location=' + lng + ',' + lat;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      if (data.status === '1') {
        var regeocode = data.regeocode;

        var province = regeocode.addressComponent.province;  // 省份
        var city = regeocode.addressComponent.city;  // 城市
        var district = regeocode.addressComponent.district;  // 区/县
        var township = regeocode.addressComponent.township;  // 街道/乡镇
        var street = regeocode.addressComponent.streetNumber.street;  // 街道名称
        var number = regeocode.addressComponent.streetNumber.number;  // 门牌号

        var address = province + city + district + township + street + number;
        console.log(address);
      }
    })
    .catch(error => console.error(error));
}

function showError(error) {
  console.log(error.message);
}

以上两个示例中，获取位置信息的代码是相同的，唯一不同的是请求的地图API。使用百度地图API时，请求的URL为https://api.map.baidu.com/geocoder/v2/?output=json&ak=你的百度地图AK&location=用户位置的纬度,用户位置的经度。使用高德地图API时，请求的URL为https://restapi.amap.com/v3/geocode/regeo?key=你的高德地图Key&location=用户位置的经度,用户位置的纬度。在获取到位置信息之后，我们还需要解析返回的数据，并将其转换为可读的地址信息。