js调用百度地图API

Posted 2022-11-08 whsw423

前几天被要求在页面中调用地图并显示指定地点位置。虽然之前没弄过，但觉的应该很简单，毕竟按着别人的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的代码很详细，复制粘贴就能直接使用。
虽然不难，学着用用总是好的，在此记录一下！