花里云与微企点共绘蓝图，企业官网步入响应式新时代-花里云

解决方案
产品
模板
团队
案例
文章
关于
SaaS学院

立即注册

首页

文章

设计,网页

摆脱百度的限制，天地图的标识让官网可信度更高。

2025-10-17 05:05:57

设计,网页

地图天地图

花里云

最近，百度地图更新，导致很多公司官网的地图定位不正常，收到影响的用户不只是数字化平台，各大平台都有所影响。给大家分享下使用国家地理信息公共服务的“天地图”展示公司定位的方法，用以替代百度地图。同时，国家提供的地图服务，让官网可信度更高。

说明：天地图里个人账号每天3000/次的API量，足够大部分企业官网使用。若不够可以认证企业号，每天600W/次的API量。

第一步，注册账号

打开国家地理信息公共服务平台（www.tianditu.gov.cn）,右上角注册账号；

第二部，创建应用

打开天地图开发管理平台（https://console.tianditu.gov.cn/api/key），创建应用：

填写应用信息：

应用名称：支持汉字、数字、字母、下划线、横杠，不超过15个
行业类型：正常选择
应用类型：这里要选择“浏览器端”
域名白名单：填写自己的域名，防止Token被到盗用；
同意天地图服务条款
提交

创建成功之后，可以获取应用Key，备用。

第三部，定位的页面

有开发经验的朋友，可以自己根据天地图的API文档开发，这里我们做个纯地图定位的页面为例，复制如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>公司位置 - 天地图</title>
    <!-- ⚠️ 重要：将 YOUR_TOKEN 替换为你在控制台获取的真实Token -->
    <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=YOUR_TOKEN"></script>
    <style>
         body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #map-container {
            width: 100%;
            height: 100vh;
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    
    <div id="map-container"></div>

    <script>
        // 页面加载完成后初始化地图
        window.onload = function() {
            // 创建地图实例，绑定到 'map-container' 元素
            const map = new T.Map('map-container');
            
            // 设置地图的中心点坐标和缩放级别
            const center = new T.LngLat(121.23, 28.68);
            map.centerAndZoom(center, 15);
    
            // 创建一个标记（Marker）
            const marker = new T.Marker(center);
            map.addOverLay(marker); // 将标记添加到地图上
    
            // 创建信息窗口
            const infoWin = new T.InfoWindow();
            infoWin.setContent(`
                <div style="width:240px;">
                    <h4 style>公司名称</h4>
                    <p><strong>地址：</strong>陕西·西安</p>
                    <p><strong>电话：</strong>400-0000-0000</p>
                </div>
            `);
    
            // 为标记添加点击事件，打开信息窗口（保留点击功能）
            marker.addEventListener("click", function() {
                map.openInfoWindow(infoWin, center);
            });
    
            // === 关键：在页面加载后立即打开信息窗口 ===
            map.openInfoWindow(infoWin, center);
        };
    </script>
</body>
</html>

3.1、上面的代码中，将“<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=YOUR_TOKEN"></script>”中的“YOUR_TOKEN” 替换成第二部申请应用中的"Key";

3.2、打开天地图·在线地图（https://map.tianditu.gov.cn/），搜索需要展示的地址，在屏幕右下角会显示经纬度：

替换这段代码中“new T.LngLat(121.23, 28.68);”括号内的经纬度；

其中（center, 15）中的数字是地图缩放级别，与数字大小成正比，数字范围一般是1-18；

// 设置地图的中心点坐标和缩放级别
            const center = new T.LngLat(121.23, 28.68);
            map.centerAndZoom(center, 15);

3.3、替换代码段中的公司名称、地址、电话信息；

// 创建信息窗口
            const infoWin = new T.InfoWindow();
            infoWin.setContent(`
                <div style="width:240px;">
                    <h4 style>公司名称</h4>
                    <p><strong>地址：</strong>陕西·西安</p>
                    <p><strong>电话：</strong>400-0000-0000</p>
                </div>
            `);

3.4、到这里，带有公司定位的地图页面就编辑好了，如下图效果，是一个全屏的地图，可以缩放大小，带有公司定位信息。