天地图一，加载天地图。

全栈攻城狮s

已于 2023-03-20 14:21:36 修改

阅读量665

点赞数

CC 4.0 BY-SA版权

分类专栏：天地图专栏文章标签： javascript 前端 html

于 2023-03-20 13:56:32 首次发布

本文链接：https://blog.youkuaiyun.com/adminuis/article/details/129666137

天地图专栏专栏收录该内容

3 篇文章

订阅专栏

文章提供了天地图js4.0的示例代码，展示如何在网页中加载天地图API，创建一个经纬度直投地图，包括设置地图中心点和缩放级别。用户需要在天地图注册应用并获取密钥，然后将密钥插入到代码中以运行示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html加载天地图js4.0

需要在天地图注册并新建应用，选择浏览器端，域名白名单可以不填，默认支持所有域名

下方是官方代码。

http://lbs.tianditu.gov.cn/api/js4.0/examples.html 这是天地图js4.0的示例地址

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－经纬度直投地图</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', {
                projection: 'EPSG:4326'
            });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何显示经纬度直投地图。</p>
</body>
</html>