HTML文件引入天地图

已于 2023-03-14 11:18:45 修改
阅读量575 收藏 3
点赞数
分类专栏： 项目技术 文章标签： 前端 html5
于 2022-12-31 22:19:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45448242/article/details/128509203
版权

#HTML文件引入天地图

请使用您的key，在天地图可免费申请。此数只是为能按照例子出地图。

##代码如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>天地图</title>
  <script type="text/javascript"
    src="http://api.tianditu.gov.cn/api?v=4.0&tk=d310c5b1d9bb5c5i3ca7c50569fc4ve30"></script>
  <script>
    var map
    var zoom = 12
    function onLoad () {
      map = new T.Map('mapDiv')
      map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom)
    }
  </script>
</head>

<body onLoad="onLoad()">
  <div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>
</body>

</html>

在这里插入图片描述

李白的故乡
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用html5技术加载天地图
09-16
利用H5前端技术加载天地图
使用leaflet在html中加载天地图且去掉左上角的缩放图标以及右下角的logo
爱吃雪糕的小布丁的博客
07-11 2440
采用leaflet框架加载天地图显示在html网页中，简洁高效！！
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍
weixin_73005544的博客
09-24 4675
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍
天地图开发指南
shi860715的博客
11-10 8322
天地图开发指南 1 申请天地图key 1.1 注册账号 注册地址：https://uums.tianditu.gov.cn/register 1.2 申请开发者 登录后 ，申请开发者https://console.tianditu.gov.cn/api/register 1.3 创建应用 点击控制台，创建应用 1.4 天地图key 2.0 天地图api使用 2.1 创建第一个地图 <!DOCTYPE html> <html lang="en"> <head>
关于实现离线地图的几种方式
weixin_57466771的博客
10-11 3045
Leaflet支持添加各种瓦片图层，包括OpenStreetMap、Google Maps等。可以通过提供瓦片图层的URL来添加图层。在JavaScript中，使用Leaflet初始化地图，并设置地图的中心点和缩放级别。其中 [22.48972, 114.03259]为中心点的经纬度，9为初始缩放级别。当你学会了以上三种方式之后，就可以自己实现如下图的类似效果了。在HTML文件中引入Leaflet库。元素，用于容纳Leaflet地图。在页面中引入 ECharts 库。具体实现步骤和（二）相似。
vue项目中使用天地图
01-08
然后，在项目的`public/index.html`文件中引入天地图的JavaScript库。通常，你可以通过CDN链接来引入，例如： ```html <script src="https://www.tianditu.gov.cn/ter/wmts.js"></script> ``` 创建一个新的组件，...
在线调用天地图.zip
10-10
`tianditu.html`是示例HTML文件，其中包含了调用天地图并显示的代码。首先，我们需要引入OpenLayers库的JavaScript文件`ol.js`，接着创建一个HTML元素作为地图容器。在JavaScript部分，我们将创建一个OpenLayers的...
openlayers 加载天地图示例
02-24
在"Openlayers 加载天地图示例"中，`Openlayers-tianditu.html`很可能是主HTML文件，它会引入OpenLayers库以及我们自定义的`tiandituLayers.js`脚本来实现天地图的加载。在HTML文件中，我们可能会看到一个`<div>`...
天地图一，加载天地图。
adminuis的博客
03-20 461
http://lbs.tianditu.gov.cn/api/js4.0/examples.html 这是天地图js4.0的示例地址。
在天地图HTML模板中添加地图标记图标，然后使用JavaScript代码将地图定位到当前位置
最新发布
迪之的博客
12-09 1467
这段代码会使用浏览器的地理位置功能获取当前位置的经纬度，并将地图中心点设置为该位置。然后，它还会将标记图标的位置设置为当前位置，并使其在地图上可见。这段代码会在地图上添加一个红色的标记图标，并给它一个id为"marker"，可根据需求选择不同的标记图标。
天地图项目1——初始化地图
qq_43093129的博客
08-08 1409
天地图应用
html5 天地图,天地图API
weixin_39582569的博客
06-26 862
入门指导JavaScript API 3.0介绍天地图JavaScript API 3.0版是一套基于JavaScript升级的应用程序接口，为开发者提供了快速调用天地图在线地理信息服务的通道，包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等，开发者可以利用天地图Web API轻松将天地图丰富的地图功能嵌入到各类应用系统或网站中，并且可以基于天地图的数据和功能服务资源开展各类增值服务及...
使用arcgis加载天地图html篇
weixin_44614518的博客
03-09 894
直接上代码！ <!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>加载天
html显示天地图_使用这个小工具，你也可以做出这种有质感的地图（附教程）...
weixin_33238272的博客
01-20 1045
在去年的30天地图挑战赛中涌现了众多精彩的地图作品，有一类地图作品很有质感，且制作非常简单。是哪一种呢？就是这种使用Aerialod软件制作的。我们先来看几张我挑选出的作品。之前张老师在GISer学习团公众号写过一篇文章咦，这种地图怎么做？地图教程打卡02，介绍过一部分应用。今天我也给大家介绍下这款软件。软件下载地址：http://ephtracy.github.io/index.htm...
本地开发加载天地图
datouniao1的博客
01-28 3776
首先到天地图控制台申请一个key: 如果是本地测试，那么对应的白名单设置为null 第二步:使用key，加载天地图: &lt;!DOCTYPE html&gt; &lt;html style="width:100%;height:100%;margin:0;font-family:Microsoft YaHei;"&gt; &lt;head&gt; &lt;meta charset=...
uniapp 引入天地图
05-16
要在uniapp中引入天地图，需要按照以下步骤进行操作： 1. 在uniapp项目中的static目录下，新建一个名为”tdt“的文件夹，将天地图的相关文件放入其中。你可以在天地图官网下载相关文件，包括地图服务API、样式文件等。 2. 在App.vue文件中引入天地图的样式文件，代码如下： ```html <style> @import url("/static/tdt/style.css"); </style> ``` 3. 在需要使用天地图的页面中，引入天地图的JS文件和CSS文件。例如，在index.vue页面中，可以在<template>标签内添加以下代码： ```html <template> <div class="map-container"> <div id="map"></div> </div> </template> <script> import "@/static/tdt/TDTMap.js"; import "@/static/tdt/TDTMap.css"; export default { mounted() { this.initMap(); }, methods: { initMap() { // 初始化地图 let map = new T.Map("map"); // 设置地图中心点和缩放级别 map.centerAndZoom(new T.LngLat(116.404, 39.915), 13); // 添加控件 map.addControl(new T.Control.Scale()); map.addControl(new T.Control.OverviewMap()); map.addControl(new T.Control.MapType()); }, }, }; </script> ``` 4. 在以上代码中，initMap()方法用于初始化地图，设置地图中心点和缩放级别。这里的地图对象使用了TDTMap.js中提供的T.Map类。 5. 最后，可以在页面中添加一个div元素，用于显示地图。在上述代码中，div元素的id为”map“，样式可以在style.css文件中进行设置。 完成以上步骤后，就可以在uniapp项目中使用天地图了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值