当前位置：首页 > article >正文

js批量输入地址获取经纬度

article 2024/11/23 4:08:14

使用js调用高德地图的接口批量输入地址获取经纬度。

以下的请求接口的key请换成你的key。

创建key：我的应用 | 高德控制台，服务平台选择《Web服务》。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>js批量输入地址获取经纬度</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  获取经纬度
  <button id="btn">开始</button>
</body>

<script>
  var pi = 3.1415926535897932384626
  var a = 6378245.0
  var ee = 0.00669342162296594323
  var x_pi = (pi * 3000.0) / 180.0
  var R = 6378137

  function transform(lng, lat) {
    var dLat = transformLat(lng - 105.0, lat - 35.0)
    var dLng = transformLng(lng - 105.0, lat - 35.0)
    var radLat = (lat / 180.0) * pi
    var magic = Math.sin(radLat)
    magic = 1 - ee * magic * magic
    var sqrtMagic = Math.sqrt(magic)
    dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * pi)
    dLng = (dLng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi)
    var mgLat = lat + dLat
    var mgLng = lng + dLng
    var newCoord = {
      lng: mgLng,
      lat: mgLat,
    }
    return newCoord
  }

  function transformLat(x, y) {
    var ret =
      -100.0 +
      2.0 * x +
      3.0 * y +
      0.2 * y * y +
      0.1 * x * y +
      0.2 * Math.sqrt(Math.abs(x))
    ret +=
      ((20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) *
        2.0) /
      3.0
    ret +=
      ((20.0 * Math.sin(y * pi) + 40.0 * Math.sin((y / 3.0) * pi)) * 2.0) /
      3.0
    ret +=
      ((160.0 * Math.sin((y / 12.0) * pi) + 320 * Math.sin((y * pi) / 30.0)) *
        2.0) /
      3.0
    return ret
  }

  function transformLng(x, y) {
    var ret =
      300.0 +
      x +
      2.0 * y +
      0.1 * x * x +
      0.1 * x * y +
      0.1 * Math.sqrt(Math.abs(x))
    ret +=
      ((20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) *
        2.0) /
      3.0
    ret +=
      ((20.0 * Math.sin(x * pi) + 40.0 * Math.sin((x / 3.0) * pi)) * 2.0) /
      3.0
    ret +=
      ((150.0 * Math.sin((x / 12.0) * pi) +
        300.0 * Math.sin((x / 30.0) * pi)) *
        2.0) /
      3.0
    return ret
  }
  /**火星转84*/
  this.gcj02_To_gps84 = function (lng, lat) {
    var coord = transform(lng, lat)
    var lontitude = lng * 2 - coord.lng
    var latitude = lat * 2 - coord.lat
    var newCoord = {
      lng: lontitude,
      lat: latitude,
    }
    return newCoord
  }

  async function getData(txxt, index) {
    await axios({
      method: 'get',
      url: `https://restapi.amap.com/v3/assistant/inputtips`,
      params: {
        output: 'json',
        location: '101,25',
        keywords: txxt,
        key: 'f70fac306fbbe36ec9a8e059ec689214h',
      },
    })
      .then(function (res) {
        console.log("res.data===", res.data);
        let tips = res.data.tips
        let lnglatArr, adcode
        for (let i = 0; i < tips.length; i++) {
          const item = tips[i];
          if (item.location.length > 0) {
            lnglatArr = item.location.split(',')
            adcode = item.adcode
            break
          }
        }
        console.log("lnglatArr--", lnglatArr);
        let lng = gcj02_To_gps84(Number(lnglatArr[0]), Number(lnglatArr[1])).lng.toFixed(6)
        let lat = gcj02_To_gps84(Number(lnglatArr[0]), Number(lnglatArr[1])).lat.toFixed(6)
        myData[index].push(`经纬度:${lng},${lat}`)
        myData[index].push(`行政区划:${adcode}`)
      })
      .catch(function (err) {
        console.log(err)
      })
  }

  let btn = document.getElementById('btn')
  btn.onclick = async function (e) {
    // getData('楚雄市文化市场综合行政执法大队')
    initData()
  }

  function saveJSON(data, filename) {
    if (!data) {
      alert('保存的数据为空')
      return
    }
    if (!filename) filename = 'json.json'
    if (typeof data === 'object') {
      data = JSON.stringify(data, undefined, 4)
    }
    // 要创建一个 blob 数据
    var blob = new Blob([data], {
      type: 'text/json',
    }),
      // 添加鼠标事件
      e = document.createEvent('MouseEvents'),
      a = document.createElement('a')
    a.download = filename
    // 将blob转换为地址
    // 创建 URL 的 Blob 对象
    a.href = window.URL.createObjectURL(blob)

    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')

    // web 标准中已废弃
    // 用以在鼠标事件创建时初始化其属性的值
    e.initMouseEvent(
      'click',
      true, // 是否可以冒泡
      false, // 是否可以阻止事件默认行为
      window, // 指向window对象
      0, // 事件的鼠标点击数量
      0, // 事件的屏幕的x坐标
      0,
      0, // 事件的客户端x坐标
      0,
      false, // 事件发生时 control 键是否被按下
      false, // 事件发生时 alt 键是否被按下
      false, // 事件发生时 shift 键是否被按下
      false, // 事件发生时 meta 键是否被按下
      0, // 鼠标按键值
      null
    )
    // 向一个指定的事件目标派发一个事件
    a.dispatchEvent(e)
  }
</script>

<script>
  let myData = [
    ['名字:甘棠村'],
    ['名字:蔡一村'],
    ['名字:蔡二村'],
    ['名字:蔡三村'],
    ['名字:龙美村'],
    ['名字:东沙村'],
    ['名字:榄塘村'],
    ['名字:东环社区'],
    ['名字:江南社区'],
    ['名字:富豪社区'],
    ['名字:东环社区'],
    ['名字:江南社区'],
    ['名字:富豪社区'],
  ]

  async function initData(params) {
    for (let index = 0; index < myData.length; index++) {
      const element = myData[index]
      let txt = element[0].split(':')[1]
      await getData('广州市番禺区市桥街道' + txt, index)
    }
    saveJSON(myData)
  }
  // initData()
</script>

</html>

效果图