在HTML中嵌入百度地图

1.打开网址百度地图APIhttp://api.map.baidu.com/lbsapi/createmap/index.html;

2.打开后如图所示,在红框处填写自己想要定位的地址

html5 高地地图导航 html地图定位_html5 高地地图导航

3.点击左侧彩电设置地图,设置参数,宽高好像不太好用,后续可以自己去代码中修改

html5 高地地图导航 html地图定位_百度地图_02

4.点击左侧添加标注即可添加标注,标注自己想要描述的地带你定位,画路线图到达自己标注的位置,然后点击保存按钮,一定要点击保存按钮(箭头的部分都是可以点击的)

html5 高地地图导航 html地图定位_html插入百度地图_03

5.每次操作后,右侧都会生成对应的预览,确认无误后点击预览,查看是否是自己想要的样子(宽高不要在意,可以去代码中调节)

6.点击获取代码,  ctrl + A全选代码,然后复制到自己想要的展示的html中去 ,下图红色标识是需要自己申请的AK码,去百度地图申请就可以,然后粘贴到标识处,否则地图不可用。

html5 高地地图导航 html地图定位_宽高_04

7.想要设置宽高、位置信息等,可以在代码中修改

8.上述操作都完成了就预览一下自己的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 就简单很多了。有任何不懂的地方可以提出来,同时如果你有更好的建议,欢迎分享出来给大家!