【天地图】移动端H5使用天地图进行定位、出现的问题及解决

Fighting_p

已于 2025-01-02 11:02:51 修改

阅读量1.7k

点赞数 6

分类专栏：地图文章标签： javascript

于 2024-11-11 16:42:00 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/143688884

版权

地图专栏收录该内容

10 篇文章

订阅专栏

使用步骤

http://lbs.tianditu.gov.cn/authorization/authorization.html

在天地图官网进行账号注册
在控制台创建应用，取 key
html 中引入天地图 H5定位示例代码

<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=自己的key"></script>
dom 中创建地图容器
<div id="map"></div>
地图初始化
map = new T.Map('map')
// 设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 38.89945), 12)
获取当前定位定位API - 服务类 - H5定位 - Geolocation.getCurrentPosition
const lo = new T.Geolocation()
lo.getCurrentPosition(定位成功回调, 定位失败回调)

【注意】测试、报错等问题

测试时使用 Edge 浏览器，并且用 localhost 开头的地址进行测试，如 http://localhost:8081/#/remind ，否则会报错
移动端测试时地址需是 https 开头，http 开头的地址也会报错（访问地址、天地图地址都要是 https ）
IOS 使用天地图会 T 报错 - 解决：引入天地图的 js 地址用 https

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    />
    <title>移动端 应用框架</title>

    <style>
      #map {
        width: 50px;
        height: 50px;
        position: absolute;
        top: -1000px;
      }
    </style>
    <!-- 【主要代码】 -->
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=自己的key"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- 【主要代码】 -->
    <div id="map"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
  <!-- <script src="//unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    var vConsole = new window.VConsole()
  </script> -->
  <script>
    /**** 【主要代码】****/
    function onLoad() {
      let map = null
      //初始化地图对象（map 为地图容器 id）
      map = new T.Map('map')
      //设置显示地图的中心点和级别
      map.centerAndZoom(new T.LngLat(116.40969, 38.89945), 12)

      const lo = new T.Geolocation()
      lo.getCurrentPosition(
        function (e) {
          // 必须用 function 定义的函数，箭头函数会报错
          if (!(e.lnglat && e.lnglat.lat)) {
            alert('定位失败')
            return
          }
          alert(`定位信息：${(e.lnglat && e.lnglat.lng) || ''},${(e.lnglat && e.lnglat.lat) || ''}`)
        },
        function () {
          alert('定位失败')
        }
      )
    }

    onLoad()
  </script>
</html>

官网示例

官网示例 - 定位 - H5定位

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－H5定位</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom);
            var lo = new T.Geolocation();
            fn = function (e) {
                if (this.getStatus() == 0){
                    map.centerAndZoom(e.lnglat, 15)
                    alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
                    var marker = new T.Marker(e.lnglat);
                    map.addOverLay(marker);

                }
                if(this.getStatus() == 1){
                    map.centerAndZoom(e.lnglat, e.level)
                    alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
                    var marker = new T.Marker(e.lnglat);
                    map.addOverLay(marker);
                }
            }
            lo.getCurrentPosition(fn);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如用H5定位所在城市</p>
</body>
</html>