WordPress如何添加百度地图,详细步骤指南

来自:素雅营销研究院

头像 方知笔记
2025年04月06日 09:34

在WordPress网站中添加百度地图可以帮助访客快速找到您的实体位置,提升用户体验。本文将详细介绍几种在WordPress中添加百度地图的方法,让您轻松实现这一功能。

方法一:使用百度地图开放平台

  1. 注册百度地图开发者账号 访问百度地图开放平台(https://lbsyun.baidu.com),注册并登录开发者账号

  2. 创建应用获取AK

  • 进入”控制台”→”应用管理”→”我的应用”
  • 点击”创建应用”,选择”浏览器端”
  • 填写应用名称,白名单可暂时设置为”*”
  • 创建成功后获取AK(API密钥)
  1. 在WordPress中嵌入代码
<div id="baidu-map" style="width:100%;height:400px;"></div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
<script type="text/javascript">
var map = new BMap.Map("baidu-map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
</script>

将代码添加到文章/页面HTML编辑器或主题模板文件中

方法二:使用插件添加百度地图

  1. 安装百度地图插件 推荐插件:
  • Baidu Map
  • WP Baidu Map
  • 百度地图插件(中文)
  1. 配置插件
  • 在插件设置中输入您的百度地图AK
  • 设置默认位置坐标
  • 调整地图大小和显示选项
  1. 在页面中添加短代码 插件通常会提供短代码,如: [baidu_map width="100%" height="400" address="您的地址"]

方法三:使用页面构建器添加

如果您使用Elementor、WPBakery等页面构建器:

  1. 在编辑页面时添加HTML/自定义HTML模块
  2. 将百度地图代码粘贴到模块中
  3. 或者使用专门的百度地图插件提供的构建器模块

注意事项

  1. 坐标获取:可使用百度地图坐标拾取工具获取精确坐标
  2. 响应式设计:确保地图在不同设备上显示正常
  3. 性能优化:避免在多个页面加载地图影响速度
  4. API调用限制:免费版有调用次数限制,商业网站需注意

进阶功能

  1. 添加多个标记点
  2. 设置信息窗口
  3. 添加路线规划功能
  4. 自定义地图样式

通过以上方法,您可以轻松在WordPress网站中添加功能完善的百度地图,提升网站的专业性和用户体验。