数据可视化大屏 项目开发时，有一个需求，是需要点击地图后，能够获取到经纬度，然后通过经纬度获取一些其他我们需要的信息。

echarts地图渲染后，我们可以通过点击获取到x轴y轴信息，通过echarts的apiconvertFromPixel来讲x轴y轴信息转为经纬度。

获取经纬度

myChart.on('click', function (params) {
    let data = myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY])
    that.getPositionByLonLats(data[0], data[1])
});

通过经纬度查询信息

我们可以通过高德的api来获取我们需要的数据

先要引入高德的api

<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=your key&plugin=AMap.Geocoder"
></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

通过高德的api AMap.Geocoder来查询地区信息

getPositionByLonLats(lng, lat) {
  var that = this;
  var lnglatXY = [lng, lat];// 地图上所标点的坐标
  AMap.service('AMap.Geocoder', function () {// 回调函数
    var geocoder = new AMap.Geocoder({});
    geocoder.getAddress(lnglatXY, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        console.log(result.regeocode);
        var address = result.regeocode.formattedAddress;
        // 获取城市名称
        that.address = address
      } else {
      }
    });
  });
},