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

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

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

百度地图生成_百度地图 腾讯地图 高德地图_百度地图生成

网站名称:百度地图API

地图制作地址:

在线演示:

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

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

第2步:获取代码

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

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

但是,问题来了!

你会发现百度地图生成,定位图标不显示!文字乱码!

百度地图生成_百度地图 腾讯地图 高德地图_百度地图生成

解决问题

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

1. 乱码问题

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

2. 定位ICON问题

自己做一个20*20像素的定位 ICON(也可以看在线演示,直接使用小编做的图标),然后把改为你的图标地址即可。

使用技巧

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


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

———END———
限 时 特 惠:本站每日持续更新海量各大内部创业教程,一年会员只需128元,全站资源免费下载点击查看详情
站 长 微 信:jiumai99

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注