乐予博客很多企业网站都会在“联系我们”页面展示公司地址，方便客户查看办公地点、了解周边道路以及规划来访路线。
整个过程主要分为五步：注册开发者账号、创建应用、获取 Key、获取地址坐标，以及在网页中插入地图代码。
一、注册腾讯位置服务开发者账号
首先打开腾讯位置服务官方网站：
官方网址： https://lbs.qq.com/
进入网站后，按照以下步骤操作：
- 点击页面右上角的“登录”或“注册”。
- 根据平台提示选择可用的账号登录或注册方式。
- 完成需要的手机验证、开发者资料填写或身份认证。
- 登录成功后，进入腾讯位置服务控制台。
如果已有腾讯位置服务开发者账号，可直接登录，不需要重复注册。
腾讯位置服务提供地图展示、地点搜索、位置服务和路线规划等功能。本文只需要最基础的网页地图展示能力。
二、创建腾讯地图应用
登录腾讯位置服务后，进入管理后台。
操作路径：控制台 → 应用管理 → 我的应用 → 创建应用
创建应用时，按照页面要求填写信息。
例如：
| 配置项目 | 填写示例 |
|---|---|
| 应用名称 | 企业官网地图 |
| 应用类型 | 根据实际网站用途选择 |
| 应用描述 | 用于公司联系我们页面的办公地址展示 |
填写完成后，点击“创建”。
一个应用可以按照腾讯平台规则管理对应的 Key。为了方便日后维护，建议单独为企业官网创建一个地图应用，不要与其他项目混用。
三、创建 Key，获取腾讯地图 API 密钥
应用创建完成后，打开对应的应用详情，找到“添加 Key”或“创建 Key”。
Key 是腾讯位置服务用于识别 API 调用来源的开发密钥。
创建时可以填写：
- Key 名称：企业官网地图 Key
- 描述：用于网站联系我们页面
- 启用产品：根据实际使用的腾讯地图 API 和控制台提示配置
**重要说明：**根据腾讯位置服务 JavaScript API GL 官方文档，基础网页地图显示并不需要额外勾选产品，直接创建 Key 即可使用。只有需要额外调用地址解析、地点检索等 WebService 接口时，才需要按照相应产品要求配置权限。
创建成功后，控制台会显示一段由字母、数字和连字符组成的 Key，例如：
XXXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX
这只是格式示意，不是真实有效的密钥。
复制自己的 Key 并妥善保存，后续添加网页地图时会使用。
如何设置域名授权？
如果 Key 管理页面提供域名或来源授权设置，建议按照腾讯当前支持的限制方式配置实际网站域名。
就需要确认正式网站所使用的域名符合对应的授权规则。测试站、预览域名和正式域名可能不同，应分别检查。
不要为了图省事长期使用不必要的宽松授权，也不要把服务端使用的 Secret Key 放入网页 JavaScript。
需要注意：用于浏览器的地图 Key 会在网页资源请求中对访客可见，这是前端 API 的工作方式。应通过平台支持的安全限制和配额管理控制使用范围。
四、获取公司地址的经纬度
获得 Key 后，还需要获取公司的具体地图坐标。
腾讯地图可以通过经纬度定位到指定地点。
打开腾讯地图坐标拾取工具：https://lbs.qq.com/getPoint
在地图中搜索公司地址，放大到实际办公楼所在位置，然后获取对应的经纬度。
例如，一组演示坐标为：
- 纬度：39.984120
- 经度：116.307484
以上仅为地图示例坐标，并不是某家企业的实际办公地址。
特别注意：腾讯地图 JavaScript API GL 使用的坐标顺序是“纬度、经度”，不要写反。
此外，腾讯位置服务使用 GCJ-02 坐标系。如果坐标来自其他 GPS 数据源或地图服务，需要核对坐标系，避免地图标记发生偏移。
五、添加地图
第1步：复制腾讯地图代码
下面是一份适用于单个 Elementor HTML 小工具的地图示例代码。
复制后，只需要更换自己的 Key 和坐标。
<!-- 公司地址：腾讯地图 -->
<style>
#xsheng-office-map {
width: 100%;
height: 500px;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
background: #f4f6f8;
}
@media (max-width: 767px) {
#xsheng-office-map {
height: 330px;
}
}
</style>
<div id="xsheng-office-map">
正在加载腾讯地图...
</div>
<script>
(function () {
"use strict";
// 1. 填入你的腾讯地图 JavaScript API Key
const KEY = "YOUR_TENCENT_MAP_KEY";
// 2. 替换成你位置坐标
const LAT = 32.189638;
const LNG = 118.815194;
const container = document.getElementById(
"xsheng-office-map"
);
if (!container) return;
function showError(message) {
if (container.isConnected) {
container.textContent = message;
}
}
if (KEY === "YOUR_TENCENT_MAP_KEY") {
showError("请先配置腾讯地图 API Key。");
return;
}
// 3. 等 SDK 真正加载完成，再初始化地图
function initMap() {
if (!container.isConnected) return;
if (
!window.TMap ||
!window.TMap.Map ||
!window.TMap.MultiMarker
) {
showError("腾讯地图 SDK 未成功加载。");
return;
}
// 防止 Elementor 重复初始化
if (container.dataset.mapReady === "1") {
return;
}
try {
container.textContent = "";
const position = new TMap.LatLng(LAT, LNG);
const map = new TMap.Map(container, {
center: position,
zoom: 16,
viewMode: "2D"
});
new TMap.MultiMarker({
map: map,
geometries: [
{
id: "office",
position: position
}
]
});
container.dataset.mapReady = "1";
} catch (error) {
console.error(
"腾讯地图初始化错误:",
error
);
showError("地图初始化失败，请查看控制台。");
}
}
// 4. 已经加载过地图 SDK 时直接初始化
if (window.TMap && window.TMap.Map) {
initMap();
return;
}
// 5. 动态加载腾讯地图 JavaScript API GL
const script = document.createElement("script");
script.src =
"https://map.qq.com/api/gljs?v=1.exp&key=" +
encodeURIComponent(KEY);
script.async = true;
script.onload = initMap;
script.onerror = function () {
showError(
"地图脚本加载失败，请检查网络和站点安全设置。"
);
};
document.head.appendChild(script);
})();
</script>
这份示例通过异步加载腾讯地图 SDK，在加载完成后初始化地图，减少脚本加载顺序带来的问题。
第2步：修改三个参数
1. 修改地图 Key
找到：
const KEY = "YOUR_TENCENT_MAP_KEY";
将其中的占位内容替换为自己在腾讯位置服务控制台申请的 Key。
2. 修改纬度
找到：
const LAT = 39.984120;
替换成公司实际纬度。
3. 修改经度
找到：
const LNG = 116.307484;
替换成公司实际经度。
完成后保存页面。
第3步：调整地图大小
代码中的：
height: 500px;
控制电脑端地图高度，可以根据网页布局调整为 400px、450px 或 600px。
移动端单独设置：
height: 330px;
这样手机屏幕上的地图不会过高。
之后把它放入对应的HTML文件中就行了，就会显示出来，如下图
最后：
对于企业官网而言，地图不仅能够展示公司位置，还能帮助来访客户确认办公地址，提升“联系我们”页面的实用性。
