百度地图不能用？天地图嵌入网页+坐标拾取全流程
百度地图无法正常使用后，很多人选择天地图替代，但嵌入网页时频繁踩坑（地图不显示、定位点消失、报错不断）。本教程结合实际操作场景，从注册到嵌入、从坐标获取到问题排查，一步步教你完成天地图嵌入+定位标注，附带专属坐标拾取工具！
一、前期准备
1. 天地图开发者注册与密钥（TK）获取
天地图嵌入网页必须用到官方密钥（TK），已注册的可直接跳过，未注册的按以下步骤操作：
1. 打开天地图开发者平台：http://lbs.tianditu.gov.cn，完成注册/登录；
2. 登录后进入「服务中心控制台」，点击「创建应用」；
3. 填写应用信息：应用名称（如“网页地图嵌入”）、应用类型选择「浏览器端」、域名白名单填写自己的网站域名（如：www.sagetessa.com，避免跨域拦截）；
4. 提交后，复制生成的32位「tk（密钥）」，保存好备用（后续所有代码都需要用到）。
二、获取定位点经纬度（天地图原生坐标）
打开专属坐标拾取工具：https://www.sagetessa.com/tdt-picker.html 搜索或者直接在地图上点击获取定位点坐标。
三、天地图嵌入网页，代码如下（仅需替换「你的TK」）
<!-- 引入天地图 API -->
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的TK"></script>
<!-- 天地图替换百度地图 -->
<script type="text/javascript">
$(function(){
// 企业坐标（你之前获取的正确坐标）
var lon = 120.9372;
var lat = 31.598836;
// 初始化地图
var map = new T.Map("map");
map.centerAndZoom(new T.LngLat(lon, lat), 15);
map.enableScrollWheelZoom(true);
// 添加标注点
var point = new T.LngLat(lon, lat);
var marker = new T.Marker(point);
map.addLayer(marker);
// 点击弹窗（公司信息）
var infoWindow = new T.InfoWindow();
infoWindow.setContent(`
<div style="padding:8px; font-size:14px;">
<strong>公司名称</strong><br>
公司地址
</div>
`);
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point);
});
});
</script>
