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，调用时需要到 官方申请 一个开发者的密钥，即为

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

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

<div id="map_address" style="width: 500px; height: 500px; "></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
var baidu_Point = new BMap.Point(104.066561,30.669561);  //经纬度坐标
var marker = new BMap.Marker(baidu_Point);               //标记
var pos_info = "<h5>地点</h5>"
+"<p style='font-size:12px;'>详细地址</p>"
var infoWindow = new BMap.InfoWindow(pos_info);          //信息展示

//地图初始化
var map = new BMap.Map("map_address");
map.centerAndZoom(baidu_Point, 20);//第二个参数指地图显示等级，数字越大显示越详细
map.addOverlay(marker);
map.openInfoWindow(infoWindow,baidu_Point);
map.addControl(new BMap.NavigationControl()); //控制工具
map.setCurrentCity("成都");                    // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);              //开启鼠标滚轮缩放
</script>

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



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

第一次用肯定会遇到一些小问题的….

百度地图查询地址需要的地点坐标

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的代码很详细，复制粘贴就能直接使用。

虽然不难，学着用用总是好的，在此记录一下！