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:0xb9625620af0fa98a!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:0xb9625620af0fa98a!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” 是页面显示的宽高,可以自行调整
百度地图地址获取方法:
一、百度搜索-百度地图,点击进入地图
第二步:输入地址搜索,点击分享,将地址复制,即可
也可以直接使用本帖提供的地址。 最后:看结果,也可以访问我的网站看看效果地址:山水化隆
该方法存在的缺点:
①无法固定地图点位。(会根据设备所在位置定位城市,例如我当前在西宁打开网站,该地图点位显示西宁)