html引入百度地图插件

一、百度地图开放平台操作

1.1.注册账号

百度地图开发平台网址：http://lbsyun.baidu.com/

百度账号不是百度地图开放平台账号，需要另外注册。

1.2.创建应用

登陆后首页上方有一个控制台，点击它：

进入之后左侧有一个应用管理，里面有一个我的应用，点击它然后再点击创建应用：

应用名称填写，应用类型选择浏览器端：

Referer白名单选择*,也可以选择你自己的网址，然后填写完成点击提交。

提交后回到我的应用界面,你就会发现新创建的应用出现了：

其中访问应用AK就是你自己的密钥，后面会使用到它。

二、生成地图文件

2.1.填写地图信息

点击http://api.map.baidu.com/lbsapi/creatmap/进入百度地图生成网址

这里输入你要定位的地址，有很多详细的设置，如果比较懒的话第一个填一下就好了,其他可以通过样式调整。

2.2.生成代码文件

填写完毕，点击黄色的获取代码按钮，会弹出代码，复制他,就是一个完整的html页面：

2.3.部署代码文件

新建一个index.html,把代码放进去，浏览器打开就是这样的：

具体样式怎么设置就看自己了

三、线上的一些问题

3.1.问题复现

如果你在你的本地浏览器运行的很正常，但是放到GitHub运行却看不到它的话，你会在控制台看到一个报错，大致意思是http请求无法获得响应，这个时候你就需要做一些代码变更：

其实是百度生成的api的版本有点老了，才1.1而且是http请求头。

3.2.解决方法

我们可以使用2.0的引入方式，注意：仅JavaScript API V2.0 版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本。文档链接百度地图api
配置。如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1

3.2.改代码

原来我们的代码长这样：

以刚才的思路，我们需要用到之前生成的访问应用AK也就是你自己的密钥,忘记了的可以看看1.2创建应用

改完后的代码长这样：

就是做个替换，然后你再上传到GitHub的时候就不会报错了。

3.4.文章引用

文章部分内容引自：

1. 百度地图怎么样才能支持API支持HTTPS
2. Html页面添加百度地图