百度BMap开发(基础入门知识)

1、创建地图实例
2、添加地图配置
3、添加地图控件
4、添加地图事件
5、创建地图标注
6、反向解析

1. 创建地图实例

   var map = new BMap.Map("map");// 创建地图实例
   var point = new BMap.Point(114.047453,22.547161);  // 创建点坐标
   map.centerAndZoom(point, 15);

2、添加地图配置

enableDragging()    none    启用地图拖拽,默认启用。
disableDragging()   none    禁用地图拖拽。
enableScrollWheelZoom() none    启用滚轮放大缩小,默认禁用。
disableScrollWheelZoom()    none    禁用滚轮放大缩小。
enableDoubleClickZoom() none    启用双击放大,默认启用。
disableDoubleClickZoom()    none    禁用双击放大。
enableKeyboard()    none    启用键盘操作,默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+-键会使地图放大或缩小一级。
disableKeyboard()   none    禁用键盘操作。
enableInertialDragging()    none    启用地图惯性拖拽,默认禁用。
(1.1 新增)
disableInertialDragging()   none    禁用地图惯性拖拽。
(1.1 新增)
enableContinuousZoom()  none    启用连续缩放效果,默认禁用。
(1.1 新增)
disableContinuousZoom() none    禁用连续缩放效果。
(1.1 新增)
enablePinchToZoom() none    启用双指操作缩放,默认启用。
(1.1 新增)
disablePinchToZoom()    none    禁用双指操作缩放。
(1.1 新增)
enableAutoResize()  none    启用自动适应容器尺寸变化,默认启用。
(1.2 新增)
disableAutoResize() none    禁用自动适应容器尺寸变化。
(1.2 新增)
setDefaultCursor(cursor:String) none    设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。
(1.1 新增)
getDefaultCursor()  String  返回地图默认的鼠标指针样式。
(1.1 新增)
setDraggingCursor(cursor:String)    none    设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。
(1.1 新增)
getDraggingCursor() String  返回拖拽地图时的鼠标指针样式。
(1.1 新增)
setMinZoom(zoom:Number) none    设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别。
(1.2 新增)
setMaxZoom(zoom:Number) none    设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别。
(1.2 新增)`在这里插入代码片`

3、添加地图控件添加

  //Navi
  gationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩放的功能。
   map.addControl(new BMap.NavigationControl());
   //ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系
   map.addControl(new BMap.ScaleControl());
            //OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
   map.addControl(new BMap.OverviewMapControl()); 
   //MapTypeControl:地图类型控件,默认位于地图右上方
   map.addControl(new BMap.MapTypeControl()); 
   map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用   
   map.enableScrollWheelZoom(); //启用滚轮缩放大小

4、添加地图事件

标准形式

map.addEventListener("operate",function(e){doSomething});

样例

map.addEventListener("click",function(e){
alert('click');
});

事件参数

click {type, target, point, pixel, overlay} 左键单击地图时触发此事件。
当双击时,产生的事件序列为: click click dblclick (自 1.1 更新)

dblclick {type, target, pixel, point} 鼠标双击地图时会触发此事件。 rightclick
{type, target, point, pixel, overlay} 右键单击地图时触发此事件。 当双击时,产生的事件序列为:
rightclick rightclick rightdblclick (自 1.1 更新)

rightdblclick {type, target, point, pixel, overlay} 右键双击地图时触发此事件。
(自 1.1 新增)

maptypechange {type, target} 地图类型发生变化时触发此事件。 (自 1.1 新增)

mousemove {type, target, point, pixel, overlay} 鼠标在地图区域移动过程中触发此事件。
(自 1.1 新增)

mouseover {type, target} 鼠标移入地图区域时触发此事件。 (自 1.2 新增)

mouseout {type, target} 鼠标移出地图区域时触发此事件。 (自 1.2 新增)

movestart {type, target} 地图移动开始时触发此事件。 moving {type, target}
地图移动过程中触发此事件。 moveend {type, target} 地图移动结束时触发此事件。 zoomstart {type,
target} 地图更改缩放级别开始时触发触发此事件。 zoomend {type, target}
地图更改缩放级别结束时触发触发此事件。 addoverlay {type, target}
当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件。 addcontrol {type, target}
当使用Map.addControl()方法向地图中添加单个控件时会触发此事件。 removecontrol {type, target}
当使用Map.removeControl()方法移除单个控件时会触发此事件。 removeoverlay {type, target}
当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件。 clearoverlays {type, target}
当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件。 dragstart {type, target,
pixel, point} 开始拖拽地图时触发。 dragging {type, target, pixel, point}
拖拽地图过程中触发。 dragend {type, target, pixel, point} 停止拖拽地图时触发。
addtilelayer {type, target} 添加一个自定义地图图层时触发此事件。 removetilelayer
{type, target} 移除一个自定义地图图层时触发此事件。 load {type, target, pixel,
point, zoom}
调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定,但可能还在载入地图图块。 resize
{type, target, size} 地图可视区域大小发生变化时会触发此事件。 hotspotclick {type,
target, hotspots} 点击热区时触发此事件。(自 1.2 新增) hotspotover {type, target,
hotspots} 鼠标移至热区时触发此事件。(自 1.2 新增) hotspotout {type, target,
hotspots} 鼠标移出热区时触发此事件。(自 1.2 新增) tilesloaded {type, target}
当地图所有图块完成加载时触发此事件。(自 1.2 新增) touchstart {type, target, point,pixel}
触摸开始时触发此事件,仅适用移动设备。(自 1.5新增) touchmove {type, target, point,pixel}
触摸移动时触发此事件,仅适用移动设备。(自 1.5新增) touchend {type, target, point,pixel}
触摸结束时触发此事件,仅适用移动设备。(自 1.5新增) longpress {type, target, point,pixel}
长按事件,仅适用移动设备。(自 1.5新增)

5、.创建标注

  var marker = new BMap.Marker(point);// 创建标注 
   map.addOverlay(marker);
   marker.enableDragging();  //开启标注拖拽功能
   marker.addEventListener("dragend", function(e){ 
    alert("当前位置:" + e.point.lng + ", " + e.point.lat); 
   })
   map.addOverlay(marker); 
   marker.addEventListener("click", function(){ 
    alert("您点击了标注"); 
   }); 

6、//反向地理编码

  // 创建地理编码实例
   var myGeo = new BMap.Geocoder();
   // 根据坐标得到地址描述
    myGeo.getLocation(point,  function(result){
    if (result){
     alert(result.address);
    }
    });
 

详情参看
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a1b0

你可能感兴趣的:(JavaScript,百度地图,gis)