百度地图jsAPI使用总结（一）基本操作

总结一下这段时间对于百度地图API的使用（API版本2.0）

百度地图JSAPI2.0参考类

准备

引用百度API资源

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

<script type="text/javascript" src="../../jquery/jquery-1.4.4.min.js">script>

百度地图容器

<div id="container">div>

百度地图jsAPI使用

实例化百度地图js代码

// 创建地图实例,"container"就是百度地图的div容器
var map = new BMap.Map("container");
//创建坐标点，第一个参数是经度，第二个参数是纬度
var point = new BMap.Point(111.68, 29.05);
//设置地图中心点和缩放级别，级别区间为3~18
map.centerAndZoom(point, 12);
//允许滚轮缩放
map.enableScrollWheelZoom(); 

以上代码效果如图

添加比例尺控件

// 左下角，添加比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
//左上角，添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();  
map.addControl(top_left_control);      // 测距离的   
map.addControl(top_left_navigation);   // 左导航默认

效果图

添加监听事件

(详细事件列表请查阅百度地图JSAPI2.0参考类)

//zoomend是缩放监听
ap.addEventListener('zoomend',function(){
    //获取当前比例尺级别
    var zoom = map.getZoom();
});

为地图添加自定义控件

 function ShowLegendControl() {
  this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT ;//默认在左下角
  this.defaultOffset = new BMap.Size(5, 5);// 默认偏移量
 }
 ShowLegendControl.prototype = new BMap.Control();
 ShowLegendControl.prototype.initialize = function(map) {
  // 创建一个DOM元素
  var div = document.createElement("div");
  div.id = "legend";
  div.style.background="White";
  div.style.padding="5px";
  div.style.opacity=" 0.8";
  div.style.borderRadius = "5px 5px 5px 5px";
  div.style.width = "100px";
  div.style.height = "108px";
  div.style.position = "absolute";
  $("
图例1
").appendTo(div);
  $("
图例2
").appendTo(div);
  $("
图例3
").appendTo(div);
  $("
图例4
").appendTo(div);
  // 添加DOM元素到地图中
  map.getContainer().appendChild(div);
  // 将DOM元素返回
  return div;
 
 }
 // 创建控件
 var showLegendCtrl = new ShowLegendControl();
 // 添加到地图当中
 map.addControl(showLegendCtrl);
 //最后微调自定义控件位置
 $("#legend").css('left',"30px");
 $("#legend").css('bottom',"60px");

效果图