WordPress 页面免密钥插入地图

WordPress 页面免密钥插入地图

我们在 WordPress 建站场景应用中很多时候会用到地图功能,来介绍区位以便更好更直观的标识某个位置的所在地。最简单的方法就是直接把地标位置在地图中截图,以图片的形式展示出来。但这种方法似乎对用户不太友好,不能互动。在奶爸建站的QQ群(群号:774633089)里有个网友问过能不能在WordPress中插入地图,我当时的回答是可以,利用地图API就行。自己也没去深究这个问题,今天没事就看了看,对比了百度地图、高德地图、腾讯地图,引用的时候基本都需要注册账号,然后申请 key ,引用都很麻烦,这里简绍一个不需要密钥的 api —— 高德地图。

获取高德地图引用代码

打开高德地图生成器:https://lbs.amap.com/console/show/tools,按步骤创建地图,功能很丰富。
WordPress 页面免密钥插入地图
可以编辑地图样式,按照自己的喜好修改地图的外观,地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺)、鼠标和键盘对地图的操作等,一般默认即可。
WordPress 页面免密钥插入地图
设置好后点击“获取代码”按钮,生成地图引用代码。

生成引用地图 HTML 文件

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

将地图插入 WordPress 页面中

打开你想要插入地图的页面,输入以下代码。(如果你使用的古腾堡编辑器,更改区块格式为“自定义HTML”)

<iframe src="amap.html" width="600" height="600" frameborder="0" scrolling="no"></iframe>

这样我们就吧地图嵌入到网页中了,当然地图的宽高、在网页中显示的位置可自己写CSS调整,也可简单地像我只调整宽和高。

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

.my-map { margin: 0 auto; width: 100%; height: 600px; }

在页面的引用中,也作相应调整,如下:

<iframe src="amap.html" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

搞定,如果你想更进一步,自己慢慢琢磨。官方也给出了各种主题样式,请移步

(2)

相关推荐