js调用百度地图API

前几天被要求在页面中调用地图并显示指定地点位置。虽然之前没弄过，但觉的应该很简单，毕竟按着别人的API调用就好。
在国内google地图是用不了了，只能选了百度地图。

---

首先需要引用百度地图的API

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">script>

此处的v=1.3是指API的版本，目前百度地图API最高是2.0，而且自1.5版本以后的API，调用时需要到 官方申请 一个开发者的密钥，即为

设置1个div用于显示地图，然后再api下开始调用。最后大致如下：

以上就实现简单的调用，并显示在坐标处显示标志，如图

确实不难(毕竟不是自己实现-_-!)。

---

第一次用肯定会遇到一些小问题的….
百度地图查询地址需要的地点坐标

var baidu_Point = new BMap.Point(104.066561,30.669561);  //经纬度坐标

如上，接收1个经纬度位置。其实也可以接收一个字符串，即查询地。比如

var baidu_Point = new BMap.Point('成都市金牛区');  //地点字符串

我在使用时地点太详细好像有点问题，最后使用经纬度查询。但开始没找到如何获取详细经纬度，所以只好找了google的地图获取了经纬度，但设置好后发现显示位置有偏差！看了 官方介绍 ,才知道百度使用的坐标不是GPS坐标

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。

好吧，原来还要进行地址转换。

//谷歌坐标
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y);

//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMap.NavigationControl());
    //坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {   
    bm.setCenter(data.points[0]);
  }
}

setTimeout(function(){
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 3, 5, translateCallback)
}, 1000);

以上是 官方demo 代码，很简单。

---

后来百度发现原来百度自己有 坐标拾取器 -_-!用来直接获取经纬度，简直醉了，智商堪忧！
附一下百度地图API地址，demo的代码很详细，复制粘贴就能直接使用。
虽然不难，学着用用总是好的，在此记录一下！