在HTML中嵌入百度地图------Sestid

在HTML中嵌入百度地图

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

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

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

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

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

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

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 就简单很多了。有任何不懂的地方可以提出来，同时如果你有更好的建议，欢迎分享出来给大家！