Login
芋圆社区 > 编程 > 天地图 > 加载天地图

加载天地图

890
0
2023-08-24
2023-08-24
Hey、小怪兽

  • • 天地图开发者官网:http://lbs.tianditu.gov.cn/,点击右上角的控制台
  • • 有个人注册和单位注册(就是每日额度不同,个人日配额1w,单位300w),这里注册个人的就够用了,如果需要单位注册的话,需要公司的营业执照啥的
  • • 注册成功后前往控制台创建一个新应用:
  • • 如图,如果在H5页面开发的话就是浏览器端
  • • 创建成功后可以点击访问统计看到日配额已经用了多少(开发的时候如果日配额不够用了,可以重新新建一个应用)
  • • 创建好应用了的话,拿到那个Key,打开VsCode,新建HTML,CSS,JS:
  • • 在HTML里主要是引入文件和地图,接着在script里等页面加载完成执行initMap(后面会写这个方法)初始化的方法:
  • <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <!-- 引入index.js和index.css -->
        <link rel="stylesheet" href="./index.css" />
        <script src="./index.js"></script>
        <!-- tk=后面跟的自己申请的天地图应用的key -->
        <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=84762e0e00395c65cbe043be0d6451b3" type="text/javascript"></script>
      </head>
      <body>
        <div id="mapDiv"></div>
        <script>
          // 页面加载完毕后执行的方法
          window.onload = function () {
            initMap();
          };
        </script>
      </body>
    </html>
  • • 在index.css写初始化的代码,还有给mapDiv这个元素写上样式:
  • * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    #mapDiv {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
  • • index.js就写刚才index.html里的初始化的地图方法initMap:
  • // 地图变量
    let map = null;
    // 中心点
    let center = [116.40769, 39.89945];
    // 缩放级别
    let zoom = 12;
    
    // 初始化地图
    const initMap = () => {
      map = new T.Map("mapDiv");
      map.centerAndZoom(new T.LngLat(center[0], center[1]), zoom);
    };
  • • centerAndZoom这个方法可以在天地图JavaScript API 4.0类参考里查到
  • • 传中心点和地图缩放比例
  • • 打开index.html就可以看到地图的加载了

下一篇:切换地图类型

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

加载天地图

切换地图类型

地图搜索功能

海量点加载

加载聚合Marker

添加事件和信息窗口

点击聚合点

弹窗和Loading

与安卓端交互

天地图完整代码

天地图panTo导致聚合点散落

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点