基于百度地图api获取某一点的详细信息 逆向解析地址

2023-02-27 14:16:56 浏览数 (1)

基于百度地图api获取某一点的详细信息 逆向解析地址

首先上图，就是我们想要实现的效果：

本章您将能学到：使用百度地图api动态获取到地图上某一点的中文地址详细信息与对应的坐标轴信息。

开发所用到的语言：Html、Css、Javascript。 本篇将直接拷贝在Html文件里面，直接打开即可运行。

参考：

全球逆地理编码服务

https://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad

先贴个代码，后面再来维护另一种方法：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos">
  </script>
  <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <title>单个逆地址解析</title>
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    #container {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #result {
      position: fixed;
      top: 10px;
      left: 10px;
      padding: 0px 7px;
      min-width: 350px;
      height: 70px;
      line-height: 35px;
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      border-radius: 7px;
      z-index: 99;
    }
  </style>
</head>

<body>
  <div id='container'></div>
  <div id='result'>
    点击展示详细的地址：
    <div id='result_l'></div>
  </div>
  <script>
    //实例化地图
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13);
    var geoc = new BMapGL.Geocoder();
    map.addEventListener('click', function (e) {
      //清除地图上所有的覆盖物
      map.clearOverlays();
      console.log(e);
      var pt = e.latlng;
      var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
      map.addOverlay(marker);
      geoc.getLocation(pt, function (rs) {
        var addComp = rs.addressComponents;
        console.log("addComp:", addComp)
        $('#result_l').text(addComp.province   ", "   addComp.city   ", "   addComp.district   ", "   addComp
          .street   ", "   addComp.streetNumber);
      })
    })
  </script>
</body>

</html>
html api

0 人点赞