Javascript调用百度地图的API

编程语言 12/25 阅读 396 views次 人气 0
摘要:

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1

1

此处的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>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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);              //开启鼠标滚轮缩放

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

这里写图片描述

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

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

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

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

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

小奋斗文章

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

评论

该文章不支持评论!

分享到: