百度地图API入门4-常用代码

1.初始化地图,设置中心点坐标和地图级别

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

2.设置地图显示的城市

map.setCurrentCity("成都");

3.开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

4. 添加地图类型控件

map.addControl(new BMap.MapTypeControl({
    mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_SATELLITE_MAP,
        BMAP_HYBRID_MAP
    ]}));

5.根据城市名设置地图中心点

map.centerAndZoom("成都",15);      // 初始化地图,用城市名设置地图中心点，就不用经纬度了

6. 设置地图最大、最小级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
map.setMinZoom(3);
map.setMaxZoom(15);

7. 缩放地图

map.setZoom(14);

8. 移动地图（中心点）

map.panTo(new BMap.Point(113.262232,23.154345));

9.拖拽地图

map.disableDragging();     //禁止拖拽
map.enableDragging();   //开启拖拽  默认开启

10. 设置地图显示范围（需要BMapLib）

var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349)); 
BMapLib.AreaRestriction.setBounds(map, b);

11. 添加自定义控件
12. 添加覆盖物

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
map.addOverlay(marker);
map.clearOverlays(); 
marker.show();
marker.hide();

12. 添加自定义覆盖物

var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("/img/test.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);              // 将标注添加到地图中

13.设置点是否可拖拽

marker.disableDragging();           // 不可拖拽
marker.enableDragging();           // 不可拖拽

14. 文字标签

var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);

15.信息窗口

var opts = {
    width : 200,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : "海底捞王府井店" , // 信息窗口标题
  }
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
marker.addEventListener("click", function(){          
  map.openInfoWindow(infoWindow,point); //开启信息窗口
});

16. 给覆盖物添加右键菜单

//创建右键菜单
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));

var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addContextMenu(markerMenu);

17. 地图事件-点击覆盖物开启信息窗口

var infoWindow = new BMap.InfoWindow("test:111<br/>test:222", opts); // 创建信息窗口对象
marker.addEventListener("click",
  function() {
    map.openInfoWindow(infoWindow, point); //开启信息窗口
  });

18. 单击获取点击的经纬度

map.addEventListener("click",function(e){
     alert(e.point.lng + "," + e.point.lat);
 });