前端js调用百度地图常用基本功能

调用百度地图前需要完成的步骤：
1.申请百度账号
2.申请密钥（AK）。
具体api文档请点击 百度地图JavaScript API 查看
点击进入上面链接后，如下图，点击获取密钥，然后点创建应用。

图1

里面的配置参数，我们按照描述来就好，如图，我们取名 test，应用类型选择浏览器端，然后设置白名单。点击提交 就生成了我们需要的密钥（AK）：

图3

3.用上一步生成的密钥，我们就可以调用百度地图实现我们的地图功能了。
代码如下：

// 以下代码是本人根据以前做的项目整理出来的，纯属手写，如有不规范处还请指出。










    
    
    
    

效果图：

图4

上面代码每块注释都有，我就不分成一块一块说了，直接拷贝过去是可以运行的。下面笔者说下引入的两个js：
第一个是百度地图必须引入的js，后面的ak就是我们刚刚创建应用的密钥。
第二个js的功能是：当我们想 以当前位置初始化 地图的时候，我们用到了 getCurrentPosition，但是用 getCurrentPosition获取到的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标和初始化地图之间需要进行一步坐标转换工作，该转换方法百度API里面已经提供了，转换一个点或者批量装换的方法均有提供：
单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js
批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js
所以这里我们引入了前者。
（但是笔者发现，用getCurrentPosition这个方法的时候，体验不是很好，初始化页面的时候地图加载很慢。笔者正在寻找更好的办法，后续再更新！）