如何在 WordPress 页面插入百度地图

一、申请百度地图API Key

  1. 注册百度账号,登录百度地图开放平台:http://lbsyun.baidu.com/,在页面底部找到“立即注册”,点击进入;

  2. 创建应用:应用名称自己取个可辩识的就好,应用类型选择“浏览器端”,应用服务默认全选,Referer白名单按格式填写你的网站域名,完成后点击“提交”;

  3. 按照百度的要求, 开发者需要经过实名认证,这里有个人开发者和企业开发者两种选择,按实际需要选择认证方式即可。注:如果是企业开发者进行商业应用,是需要向百度缴纳年授权费的 😉

  4. 在“我的应用”里找到对应应用的访问应用(AK)一栏,就是我们后面要用到的Access Key访问密钥。

二、创建百度地图,获取引用代码

  1、打开百度地图生成器:http://api.map.baidu.com/lbsapi/createmap/,按步骤创建地图;

    ①定位中心点,即我们要定位的位置。已有标识的最好,没有标识的,选一个最接近的地址。地图级别可填写数字,最高19级,也可通过地图上的 +、- 号来调整。

    ②设置地图,可以按照自己的需要,修改地图的外观——地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺),以及鼠标和键盘对地图的操作等。一般默认即可。

    ③添加标注,可以添加自己想要标注的位置和信息。

  2、点击黄色的“获取代码”按钮,生成百度地图引用代码;

百度地图生成工具基于百度地图 Javascript API v2.0版本开发,为了正常使用百度地图API服务,代码中需要加入你的密钥,即前面申请的 AccessKey ,修改处:

三、生成引用百度地图HTML文件

把上一步生成的百度地图引用代码保存为一个 HTML 文件,如 baidumap.html,我们把它上传到网站的根目录下,在浏览器中打开,就可以看到自己定义的百度地图了。

四、将百度地图插入WordPress页面中

打开你想要插入百度地图的页面,更改区块格式为“自定义HTML”,输入以下代码:

这样我们就轻松地用一个 iframe 标签将百度地图嵌入到网页中了,当然地图的宽高、在网页中显示的位置可自己写CSS调整,也可像本文例子中简单地只调整宽和高。

在 baidumap.html 文件中将 width:700px 修改为 width:100%,如下:


    

在页面的引用中,也可作相应调整,我加大了 height 的值,使其上下有些间距,如下:

五、让百度地图API支持HTTPS

经过上面的改造后,在 Google Chrome 中浏览时,却提示“加载不安全脚本”,不能显示地图上的控件,网站的小绿锁标识也不显示。这是由于 JavaScript API 没有启用 https 服务。我们只需将 api 的网址 http 改为 https,再加一个特殊字段 (s=1)即可解决。修改如下: