WordPress插入地图

  • WordPress 页面免密钥插入地图

    我们在 WordPress 建站场景应用中很多时候会用到地图功能,来介绍区位以便更好更直观的标识某个位置的所在地。最简单的方法就是直接把地标位置在地图中截图,以图片的形式展示出来。但这种方法似乎对用户不太友好,不能互动。在奶爸建站的QQ群(群号:774633089)里有个网友问过能不能在WordPress中插入地图,我当时的回答是可以,利用地图API就行。自己也没去深究这个问题,今天没事就看了看,对比了百度地图、高德地图、腾讯地图,引用的时候基本都需要注册账号,然后申请 key ,引用都很麻烦,这里简绍一个不需要密钥的 api —— 高德地图。 获取高德地图引用代码 打开高德地图生成器:https://lbs.amap.com/console/show/tools,按步骤创建地图,功能很丰富。可以编辑地图样式,按照自己的喜好修改地图的外观,地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺)、鼠标和键盘对地图的操作等,一般默认即可。设置好后点击“获取代码”按钮,生成地图引用代码。 生成引用地图 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 > 搞定,如果你想更进一步,自己慢慢琢磨。官方也给出了各种主题样式,请移步

    2019年11月26日
    0 0 1.6K

💖 帮助我们更好的生产内容,请将本站加入广告屏蔽插件的白名单,非常感谢。
🚀 请尽快激活您的账号,账号注册未激活30天后将被清理。(已激活用户请忽略)
点击登录,重新获取激活邮件。