wordpress网站添加百度导航地图,只用一句html代码搞定

wordpress网站添加百度导航地图,只用一句html代码搞定

废话不多说,直接上教程

第一步:先进入谷歌地图地址,地址:http://www.google.cn/maps

不要误会,就是谷歌,但是谷歌存在国内无法访问现象,所以最后要将地址替换成百度地图地址。(或许其他地图也可以,例如:高德 ,有兴趣可以自行验证)
注意:若地址无法访问直接复制下面代码(本人开了加速器才能访问)
在这里插入图片描述

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d391565.2558302223!2d116.11727820954714!3d39.93907312984264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f05296e7142cb9%3A0xb9625620af0fa98a!2z5Lit5Zu95YyX5Lqs5biC!5e0!3m2!1szh-CN!2s!4v1657997965699!5m2!1szh-CN!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
第二步:点击 maps.google.com.hk,进入地图页面,输入你的地址,回车查询

在这里插入图片描述

第三步:点击分享,嵌入地图,复制HTML代码

在这里插入图片描述
得到代码如下:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d391565.25583022175!2d116.11727820954714!3d39.93907312984264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f05296e7142cb9%3A0xb9625620af0fa98a!2z5Lit5Zu95YyX5Lqs5biC!5e0!3m2!1szh-CN!2s!4v1657998246146!5m2!1szh-CN!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
第四步:打开你的wordpress网站的编辑页面或者文章,插入自定义html区块,将html代码复制进去

在这里插入图片描述

第五步:点击预览(截图已经替换成百度地图地址,接着往下看)

在这里插入图片描述

第六步:完成以上步骤网站若未显示地图说明,说明国内网络无法访问谷歌地图,替换代码中的地址:

①找到https://www.google.com/maps/embed?将其替换成百度地图地址:https://j.map.baidu.com/d8/orpf

②替换后代码如下 (若嫌啰嗦,可直接使用下面代码)

<iframe src="https://j.map.baidu.com/d8/orpf pb=!1m18!1m12!1m3!1d1613.6951328756177!2d102.02929565821819!3d36.01076216468712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x36522ad71899682b%3A0x9a6773f8c5dc3fc5!2z5YyW6ZqG5Y6_576k56eR5paw5Yy65Lit5b-D5bm_5Zy6!5e0!3m2!1szh-CN!2s!4v1657996769695!5m2!1szh-CN!2s" width="1200" height="380" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

注意:width=“1200” height=“380” 是页面显示的宽高,可以自行调整

百度地图地址获取方法:
一、百度搜索-百度地图,点击进入地图

在这里插入图片描述

第二步:输入地址搜索,点击分享,将地址复制,即可

在这里插入图片描述
也可以直接使用本帖提供的地址。
最后:看结果,也可以访问我的网站看看效果地址:山水化隆
在这里插入图片描述

该方法存在的缺点:

①无法固定地图点位。(会根据设备所在位置定位城市,例如我当前在西宁打开网站,该地图点位显示西宁)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值