当前位置：首页 > CMS教程 > 正文

如何在WordPress中添加地图？

admin
CMS教程
2025-07-07
2733

在WordPress中添加地图主要有两种方法：使用专用地图插件（如WP Google Maps或Leaflet Map）或手动嵌入地图服务（如Google Maps）提供的HTML代码，插件方式更简单直观，适合大多数用户。

在WordPress网站上调用地图能帮助访客直观定位,提升用户体验和信任度，以下是几种主流方法，兼顾安全性、易用性和合规性（符合GDPR等隐私法规）：

使用专业插件（推荐新手）

插件选择原则：优先选更新频繁、评分高（4.5+）、安装量大的插件，确保安全可靠。

如何在WordPress中添加地图？第1张

WP Google Maps
- 步骤：
  - 安装插件后,进入 WP Google Maps → Add New
  - 搜索地址 → 调整标记点 → 复制短代码 [wpgmza id="1"]
  - 粘贴到页面/文章编辑器
- 优势：无需API密钥，免费基础功能足够。
Embed Google Map（轻量级方案）
- 步骤：
  - 在Google Maps官网找到位置 → 点击”分享”→ 选择”嵌入地图”
  - 复制HTML代码 → 粘贴到WordPress编辑器的”自定义HTML”模块
- 注意：需遵守Google Maps使用条款，商业网站可能需付费。

手动集成API（适合开发者）

方案1：Google Maps API

获取API密钥
- 访问Google Cloud Console → 创建项目 → 启用”Maps JavaScript API” → 生成密钥。

添加代码到WordPress

安装插件 Insert Headers and Footers → 将以下代码粘贴到”Header”中：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

在页面模板中添加容器和脚本：

<div id="map" style="height:400px;"></div>
<script>
  function initMap() {
    new google.maps.Map(document.getElementById("map"), {
      center: { lat: 39.9042, lng: 116.4074 }, // 替换为你的坐标
      zoom: 12
    });
  }
</script>

方案2：百度地图（国内用户优化）

申请密钥
- 注册百度地图开放平台 → 创建应用 → 获取AK（API Key）。

集成代码

使用插件 Code Snippets 添加以下代码：

<div id="bmap" style="height:400px;"></div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
<script>
  var map = new BMap.Map("bmap");
  var point = new BMap.Point(116.404, 39.915); // 北京坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);
</script>

关键注意事项

API密钥安全
禁止公开密钥！通过插件或主题配置页存储，避免硬编码在代码中。
隐私合规
- 若收集用户位置数据,需在隐私政策中说明（参考GDPR/CCPA）。
- Google Maps需添加用户同意提示。
性能优化
- 延迟加载地图：使用插件（如 WP Rocket）或添加 loading="lazy" 属性。
- 移动端适配：确保容器宽度为 100%。