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

柔情只为你懂 2024-04-17 14:19 174阅读 0赞

# 在HTML中嵌入百度地图 #

1.打开网址百度地图API[http://api.map.baidu.com/lbsapi/createmap/index.html][http_api.map.baidu.com_lbsapi_createmap_index.html]；

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3][]

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 把页面调出来，参考代码：

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

[http_api.map.baidu.com_lbsapi_createmap_index.html]: http://api.map.baidu.com/lbsapi/createmap/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/160f99cd32e04fd2bdf17c60ac7bc6b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bc250fed67c6429b9d5b6b8386376842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b4483f310a8f44f6b376b2cf55e0335f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c29afe5cd94a45c4abcb8d2bcfe236f7.png