支持iframe的天地图，Web网页中使用免费地图天地图替代百度、高德地图，网站地图

百度、高德、腾讯地图现在商业授权费都是5W/年。网站、APP、企业内部应用都算商业用图。不想吃官司又没有钱的小公司只能寻找免费的地图了。

目前还能免费使用的有：天地图、凯立德、维智、图炫

这里整理了天地图的Web接入方法供大家参考

天地图虽然没有其他几个好看，但毕竟是国家队(自然资源部)，稳定性应该更有保障吧。

百度地图商业授权价格

注册

打开 https://www.tianditu.gov.cn/ ，选个人注册就可以了，如果配额不够，个人账号也可以进行企业认证（也可以多注册几个个人账户来提升配额）

申请成为开发者

打开控制台，登陆刚刚注册好的账户，申请成为开发者，这里也可以选个人开发者

申请成为开发者

创建应用

成为开发者后，在控制台首页可以看见应用管理**，点击创建应用

创建应用

填写名称、选择行业、选择应用类型。类型这里因为我们需要Web页面使用选了浏览器端。

注意白名单填写完整域名用,隔开，如：www.lmlq.com,m.lmlq.com，不接受泛域名如*.lmlq.com

创建应用

创建后你就得到了应用的API Key了，先复制一下，马上用到

API Key在这里

添加到Web页面

官方文档：JavaScript API 4.0

这里给一个做好的页面的例子，添加上自己的API Key、改改文字和坐标就可以直接使用了：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liming map From Tianditu</title>
    <style type="text/css">
        body, html{width:100%;height:100%;margin:0;}
        #mapDiv .tdt-infowindow-content>h2{font-size:20px;margin: 5px 0 10px;}
        #mapDiv .tdt-infowindow-content>p{font-size:14px;margin: 0 0 5px;}
        #mapDiv .tdt-infowindow-content img{float:right;width:60px;height:60px;margin-left:10px}
        #mapDiv {height:100%;width:100%;overflow:hidden}
        .tdt-control-copyright{opacity: 0.4;}
        @media (max-width: 500px) {
            #youbian{display: none;}
        }
        @media (min-width: 501px) {
            #mapDiv .tdt-infowindow-content img{float:right;width:80px;height:80px;margin-left:10px}
        }
    </style>
</head>
<body>
    <div id="mapDiv"></div>
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=【这个地方要改成你的API Key】" ></script>
    <script type="text/javascript">
        window.onload = function(){
            var map;
            var zoom = 15;
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(113.5045, 34.812), zoom);
            var licontent=`<h2>黎明重工股份有限公司</h2>
            <img src="https://www.lmlq.com/img/logo-map.png">
            <p><strong>地址：</strong>中国-郑州-国家高新技术产业开发区科学大道169号</p>
            <p id="youbian"><span><strong>邮编：</strong>450001</span></p>
            <p><strong>电话：</strong>4006551888 0371-67986666</p>
            <p><strong>网站：</strong><a href="https://www.lmzg.com" target="_top">www.lmzg.com</a></p>`;
            var marker = new T.Marker(new T.LngLat(113.5045, 34.808));
            console.log(marker)
            map.addOverLay(marker);
            var infoWindow
            if(window.innerWidth > 500) {
                infoWindow = new T.InfoWindow(licontent, {minWidth:450});
            } else {
                infoWindow = new T.InfoWindow(licontent, {minWidth:240});
            }
            marker.openInfoWindow(infoWindow);
        }
    </script>
</body>
</html>

使用方法有两种：

把上面的HTML内容保存下来，用<iframe>引入
直接写入页面中

支持iframe的天地图，Web网页中使用免费地图天地图替代百度、高德地图，网站地图