网站使用腾讯地图标注公司位置代码 免费又好用

作为一名企业官网开发者，最近在给公司官网添加「企业地址地图展示」功能时，踩了一个不小的坑 —— 百度地图商用授权的费用远超预期，最终转而使用腾讯地图，不仅免费满足了需求，还实现了更精准的定位展示。今天就来和大家聊聊地图服务的选择，以及腾讯地图的实操干货。
步骤 1： 申请腾讯地图开发者 Key（免费）
访问腾讯地图开放平台：

腾讯位置服务 - 立足生态，连接未来

  注册并登录开发者账号，进入「控制台」-「我的应用」-「创建应用」，填写应用名称（如「企业官网地图」），应用类型选择「网站应用」。
应用创建完成后，点击「添加 Key」，选择「WebService API」或「JavaScript GL API」（根据需求选择，本文使用 JavaScript GL API），填写网站域名白名单（测试阶段可填*，上线后填写精准域名，避免 Key 被滥用）。
提交后即可获取免费的开发者 Key，该 Key 可直接用于企业官网的地图展示，无需额外付费。

步骤 2： 用官方工具拾取精准坐标（重点推荐）
很多开发者都会遇到「坐标不准」的问题，腾讯地图的官方坐标拾取工具完美解决了这个痛点，工具地址：https://lbs.qq.com/getPoint/
打开工具后，可直接在搜索框输入企业详细地址（如「江苏省苏州市阳阳得意电脑服务区」），点击搜索，地图会自动定位到目标地址。
拖动地图上的红色标记，微调至精准的门牌号位置（如需更精准，可放大地图至 19 级）。工具下方会自动生成对应的经纬度坐标（格式：纬度, 经度），直接复制即可，无需担心坐标系差异（腾讯地图使用自有坐标系，拾取的坐标可直接用于 API 集成，无需转换）。
小技巧：拾取坐标后，可点击「验证坐标」，确认地址是否准确，避免集成后出现定位偏差。

记住上图右上方显示的坐标值即可。

步骤 3： 集成腾讯地图到企业官网（完整代码）
腾讯地图的集成非常简单，只需引入官方 JS 文件，再编写少量初始化代码即可，以下是完整的可复用代码（已包含企业 LOGO、信息窗口、点击交互等功能）：

1. <!-- 地图容器：设置宽高，适配官网布局 放在需要展示的位置-->
   
2. <div id="tencent-map" style="width: 100%; height: 450px;"></div>
   
3. 
   
4. <!-- 引入腾讯地图 GL JS 1.7（替换为你自己的开发者Key） -->
   
5. <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.7&key=你的腾讯地图开发者Key"></script>
   
6. <script>
   
7. // 确保页面资源加载完成后执行，避免API加载异常
   
8. window.addEventListener('load', function () {
   
9.   // 检查腾讯地图API是否加载成功
   
10. if (typeof TMap === 'undefined') {
    
11.     console.error('TMap API 加载失败，请检查网络或Key是否有效');
    
12. return;
    
13. }
    
14. 
    
15.   // 从腾讯地图坐标拾取工具获取的精准坐标（纬度在前，经度在后）
    
16.   const targetLat = 30.820074;
    
17.   const targetLng = 104.190504;
    
18. 
    
19.   // 1. 初始化地图实例
    
20.   const map = new TMap.Map("tencent-map", {
    
21.     center: new TMap.LatLng(targetLat, targetLng), // 地图中心点坐标
    
22.     zoom: 19, // 缩放级别（19级最精准，可根据需求调整18-20）
    
23.     pitch: 0, // 地图倾斜角度，0为平面地图
    
24.     rotation: 0, // 地图旋转角度，0为正方向
    
25.     showControl: true // 显示地图默认控制栏（缩放、视角切换）
    
26. });
    
27. 
    
28.   // 2. 添加企业地址标记
    
29.   const markerLayer = new TMap.MultiMarker({
    
30.     map: map,
    
31.     geometries: [{
    
32.       id: 'company-marker',
    
33.       position: new TMap.LatLng(targetLat, targetLng), // 标记坐标与地图中心一致
    
34.       icon: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-default.png" // 默认标记图标
    
35. }]
    
36. });
    
37. 
    
38.   // 3. 构建信息窗口（包含企业LOGO、电话、地址，优化样式）
    
39.   const infoContent = `
    
40. <div style="min-width: 280px; padding: 12px; background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
    
41. <div style="text-align: center; margin-bottom: 8px;">
    
42. <img src="网站LOGO文件地址"
    
43.          style="width: 80px; height: 80px; object-fit: contain; border-radius: 4px; display: inline-block;"
    
44.          alt="公司LOGO"
    
45.          onerror="this.src='https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-default.png'; this.style.width='40px'; this.style.height='40px';">
    
46. </div>
    
47. <div style="color: #CC5522; font-size: 14px; font-weight: bold; margin-bottom: 6px; text-align: center;">阳阳得意电脑服务区</div>
    
48. <div style="font-size: 13px; line-height: 1.6; color: #333; text-align: left;">
    
49.     电话：18088888888<br>
    
50.     地址：江苏省苏州市工业园区唯亭街道XX大厦1818
    
51. </div>
    
52. </div>
    
53.   `;
    
54. 
    
55.   // 4. 初始化并打开信息窗口
    
56.   const infoWindow = new TMap.InfoWindow({
    
57.     map: map,
    
58.     position: new TMap.LatLng(targetLat, targetLng),
    
59.     content: infoContent,
    
60.     offset: { x: 0, y: -32 } // 向上偏移，避免遮挡标记
    
61. });
    
62.   infoWindow.open();
    
63. 
    
64.   // 5. 绑定标记点击事件，点击重新打开信息窗口
    
65.   markerLayer.on('click', function (event) {
    
66.     infoWindow.setPosition(event.geometry.position);
    
67.     infoWindow.open();
    
68. });
    
69. });
    
70. </script>
    

复制代码

步骤 4： 替换代码中的「你的腾讯地图开发者 Key」为自己申请的有效 Key。以及其他的和公司信息有关的内容