高德地图js api 通过经纬度获取三级市区联动

首先，你需要使用高德地图 JavaScript API的`AMap.Geocoder`类来获取经纬度对应的地址信息。可以使用`AMap.Geocoder`的`getAddress`方法，然后在回调函数中获取到市、区、街道等详细地址信息。代码示例如下：

// 初始化地图
var map = new AMap.Map('mapContainer', {
  zoom: 13,
  center: [116.397428, 39.90923]
});

// 创建地址解析器实例
var geocoder = new AMap.Geocoder();

// 获取经纬度对应的地址信息
geocoder.getAddress([116.397428, 39.90923], function(status, result) {
  if (status === 'complete' && result.regeocode) {
    var addressComponent = result.regeocode.addressComponent;
    var province = addressComponent.province; // 省份
    var city = addressComponent.city; // 城市
    var district = addressComponent.district; // 区县
    var township = addressComponent.township; // 街道
    console.log(province, city, district, township);
  }
});

获取到市、区、街道等详细地址信息后，你可以使用该信息来获取三级市区联动。具体实现方式可能因前端框架和具体需求而有所不同，以下是一种基本的实现思路：

1. 在HTML中创建三个下拉框，分别用于显示省、市、区信息。
2. 使用AJAX发送请求，获取省份信息列表，并填充到对应的下拉框中。
3. 监听省份下拉框的`change`事件，当省份改变时，根据省份信息获取对应的城市信息列表，并填充到城市下拉框中。
4. 监听城市下拉框的`change`事件，当城市改变时，根据城市信息获取对应的区县信息列表，并填充到区县下拉框中。

代码示例如下：

<!-- HTML代码 -->
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>

// 获取省份信息列表并填充到下拉框中
$.ajax({
  url: 'http://localhost:8080/provinces',
  success: function(data) {
    var options = '';
    for (var i = 0; i < data.length; i++) {
      options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
    }
    $('#province').html(options);

    // 初始化城市和区县下拉框
    getCityList(data[0].id);
    getDistrictList(data[0].id, 1);
  },
  error: function() {
    alert('获取省份信息失败');
  }
});

// 监听省份下拉框的change事件，获取对应的城市信息列表并填充到下拉框中
$('#province').change(function() {
  var provinceId = $(this).val();
  getCityList(provinceId);
  getDistrictList(provinceId, 1);
});

// 监听城市下拉框的change事件，获取对应的区县信息列表并填充到下拉框中
$('#city').change(function() {
  var cityId = $(this).val();
  getDistrictList(cityId, 2);
});

// 获取城市信息列表并填充到下拉框中
function getCityList(provinceId) {
  $.ajax({
    url: 'http://localhost:8080/cities?provinceId=' + provinceId,
    success: function(data) {
      var options = '';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('#city').html(options);
    },
    error: function() {
      alert('获取城市信息失败');
    }
  });
}

// 获取区县信息列表并填充到下拉框中
function getDistrictList(parentId, level) {
  $.ajax({
    url: 'http://localhost:8080/districts?parentId=' + parentId,
    success: function(data) {
      var options = '';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('#district').html(options);
      if (level === 1) {
        // 如果是省份改变触发的获取区县信息列表，要将区县下拉框重置为空
        $('#district').val('');
      }
    },
    error: function() {
      alert('获取区县信息失败');
    }
  });
}

在上面的代码中，`getCityList`和`getDistrictList`函数分别用于获取城市和区县信息列表，并将获取到的信息填充到对应的下拉框中。其中，`parentId`参数表示上级地区的ID，`level`参数表示当前下拉框的级别，用于判断是否需要将下拉框重置为空。你需要根据实际情况修改这些函数的实现。