AMO全媒体运营
首页 前端设计 给网站添加百度地图代码,并可自定义定位坐标

给网站添加百度地图代码,并可自定义定位坐标

有一次给客户网站的联系我们页面添加一张标注有公司地址的百度地图,结果客户反馈说,为什么我的地图不能用鼠标拖动的啊?没想到现在客户要求这么高了,想偷懒一点也不行。经过几番折腾,发现添…

有一次给客户网站的联系我们页面添加一张标注有公司地址的百度地图,结果客户反馈说,为什么我的地图不能用鼠标拖动的啊?没想到现在客户要求这么高了,想偷懒一点也不行。经过几番折腾,发现添加百度地图API代码就可以实现。

方法一:通过网站后台编辑器自带的百度地图功能自动生成动态地图。(WordPress后台是没有的哦)

方法二:通过百度地图生成器在线生成,下面来看看方法二的做法。

网站名称:百度地图API
地图制作地址:http://api.map.baidu.com/lbsapi/creatmap/
在线演示:http://shejidaren.com/examples/baidu-map/

2018.7.27更新:
一个新的生成地址,但这个地址需要「申请密匙」才能正常使用,不想要密匙的,就用上面的链接生成:http://api.map.baidu.com/lbsapi/createmap/

第1步:创建地图,打开上面的「地图制作地址」进行创建

还可以添加标注、定位、文字等等,超级简单哦!

第2步:获取代码

点击「获取代码」按钮,并复制代码到你的 HTML 文件。

此时,双击你的 HTML 文件就应该可以看到刚刚制作的地图咯。

但是,问题来了!

你会发现,定位图标不显示!文字乱码!

解决问题

出现这样的问题,很明显百度已经很久没人来维护这个页面,所以小编只好手动解决。

1. 乱码问题

把代码中的 charset=gb2312 改为 charset=utf-8,这样就解决了乱码问题

2. 定位ICON问题

自己做一个20*20像素的定位 ICON(也可以看在线演示,直接使用小编做的图标),然后把http://app.baidu.com/map/images/us_mk_icon.png改为你的图标地址即可。

使用技巧

不要在地图页面加任何样式,把它独立出来,需要用到的时候,直接通过 iFrame 把页面调出来,参考代码:

<iframe style=”display: block; height: 300px; width: 500px;” src=”http://shejidaren.com/examples/baidu-map/” width=”300″ height=”150″ frameborder=”0″></iframe>

总体来说这个方法是有点繁琐,小编用过一些网站后台编辑器就自带了百度地图 API 就简单很多了。有任何不懂的地方可以提出来,同时如果你有更好的建议,欢迎分享出来给大家!

大家如果想了解如何在网站上添加 google 地图(嵌入式可自定义名称),请查看这篇文章

以上内容就是“给网站添加百度地图代码,并可自定义定位坐标”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容,可以来AdobeEdu设计联盟官方网站获取。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

2022年 CodePen 最热门的前端代码 Top 100

2022年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带...
优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,...
架构图有哪些?很多程序员都不会画

架构图有哪些?很多程序员都不会画

很多程序员画架构图头疼,不知道画什么、怎么画! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要画图。 一...
CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案...
表单密码强度可视化设计

表单密码强度可视化设计

在填写表单密码时,有的会会显示「弱、中、强」的文案来表示你填写的密码强度,这是一种不错的用户体验方式,然而今天我们分享一...

发表回复

返回顶部