百度地图调用笔记：javascript版本2

学完基础的控件类的设置和操作，我觉得有必要对核心类进行一个归类了，可以参考一下的核心类，其中对于Map核心类的某些操作我放到用到的时候在进行：
1.PanOptions类：panBy和panTo方法的可选参数，没有构造函数，通过对象字面量形式表示。

    属性：
    noAnimation:是否在平移过程中禁止动画。(自1.2新增)(Boolean)

2.MapOptions:此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

    属性：
        1.minZoom:地图允许展示的最小级别。(Number)
        2.maxZoom:地图允许展示的最大级别。(Number)
        3.mapType:地图类型，默认为BMAP_NORMAL_MAP。(MapType:参考地图类型类，后面会介绍)
        4.enableHighResolution:是否启用使用高分辨率地图。在iPhone4及其后续设备上，可以通过开启此选项获取更高分辨率的底图，v1.2,v1.3版本默认不开启，v1.4默认为开启状态。(Boolean)
        5.enableAutoResize:是否自动适应地图容器变化，默认启用。(Boolean)
        6.enableMapClick:是否开启底图可点功能，默认启用。(Boolean)

3.Viewport：此类代表视野，不可实例化，通过对象字面量形式表示。(自 1.1 新增)

    属性：
        center：视野中心点。(Point)
        zoom：视野级别。(Number)

4.ViewportOptions：此类作为map.getViewport与map.setViewport方法的可选参数，不可实例化。

    属性：
        1.enableAnimation:是否启用动画效果移动地图，默认为true。当调整后的级别与当前地图级别一致时，将使用动画效果移动地图。(Boolean)
        2.margins:视野调整的预留边距，例如：margins: [30, 20, 0, 20] 表示坐标点会限制在上述区域内。(Array<Number>)
        3.zoomFactor:地图级别的偏移量，您可以在方法得出的结果上增加一个偏移值。例如map.setViewport计算出地图的级别为10，如果zoomFactor为-1，则最终的地图级别为9。(Number)
        4.delay:改变地图视野的延迟执行时间，单位毫秒，默认为200ms。此延时仅针对动画效果有效。(Number)

5.APIVersion:此常量表示API版本号，通过字符串进行描述。

    属性：
        BMAP_API_VERSION:返回当前API版本。例如，1.2版本返回字符串“1.2”。(String)

6.MapStyle:该类用于设置地图样式，使用对象字面量形式表示，不可实例化。

    属性：
        features:设置地图上展示的元素种类，支持point（兴趣点）、road（道路）、water（河流）、land（陆地）、building（建筑物）。(Array)
        style:设置地图底图样式，目前支持normal（默认样式）,dark（深色样式）,light（浅色样式）三种。(string)

7.Map类:百度地图最核心的一个类，用来实例化一个地图，之所以最后介绍这个，是因为前面基本上是配置信息，只要介绍这个的时候把那写配置信息初始化进去就可以了，这里我不会全部介绍完，因为到了别的类的时候我还是会继续介绍的。

    构造方法：
        Map(container:String|HTMLElement[,opts:MapOptions]):在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。
        注意，构造方法是百度地图的一切开始，也就是上面写到的
        var mp=new BMap.Map("传入你刚才提供的容器的id");
        方法，只有构造完成一个函数以外，才能够得到百度地图的起点。

    配置方法：
        下面方法基本上是开关方法，或者对等方法，两组一对
        enableDragging():启用地图拖拽，默认启用。
        disableDragging():禁用地图拖拽.

        enableScrollWheelZoom():启用滚轮放大缩小，默认禁用。
        disableScrollWheelZoom():禁用滚轮放大缩小。

        enableDoubleClickZoom():启用双击放大，默认启用。
        disableDoubleClickZoom():禁用双击放大

        enableKeyboard():启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
        disableKeyboard():禁用键盘操作。

        enableInertialDragging():启用地图惯性拖拽，默认禁用。
        disableInertialDragging():禁用地图惯性拖拽。

        enableContinuousZoom():启用连续缩放效果，默认禁用。
        disableContinuousZoom():禁用连续缩放效果。

        enablePinchToZoom():启用双指操作缩放，默认启用。
        disablePinchToZoom():禁用双指操作缩放。

        enableAutoResize():启用自动适应容器尺寸变化，默认启用。
        disableAutoResize():禁用自动适应容器尺寸变化。

        下面配置信息是存取方法，取得返回值是存的设置值
        setDefaultCursor(cursor:String):设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。
        getDefaultCursor():返回地图默认的鼠标指针样式。

        setDraggingCursor(cursor:String):设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。
        getDraggingCursor():返回拖拽地图时的鼠标指针样式。

        下面是配置信息是设置方法
        1.setMinZoom(zoom:Number):设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别。
        2.setMaxZoom(zoom:Number):设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别。
        3.setMapStyle(mapStyle:MapStyle)：设置地图样式，样式包括地图底图颜色和地图要素是否展示两部分。注意，该类型可以参考上面的MapStyle类
        4.setPanorama(pano:Panorama):将全景实例与Map类进行绑定。注意，该类型可以参考下面的全景类。
        5.disable3DBuilding()：禁用地图的3D楼块展现功能。

    状态方法：
        该方法一般具有返回值，请参考()里面的返回值类型
        1.getBounds():返回地图可视区域，以地理坐标表示。(Bounds)返回值参考前面的基础类
        2.getCenter():返回地图当前中心点。(Point)返回值参考前面的基础类
        3.getDistance(start:Point, end:Point)返回两点之间的距离，单位是米。(Number)
        4.getMapType():返回地图类型。(MapTypes)
        5.getSize():返回地图视图的大小，以像素表示.(Size)
        6.getViewport(view: Array<Point>[, viewportOptions: ViewportOptions]):根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。此方法仅返回视野信息，不会将新的中心点和级别做用到当前地图上。(Viewport)
        7.getZoom():返回地图当前缩放级别。(Number)
        8.getPanorama():获取与Map类绑定的全景实例。(Panorama)

    修改地图状态方法:
        下面方法可以用来设置地图状态信息，这样可以动态设置。基本上没有返回值。

        1.centerAndZoom(center:Point, zoom:Number):设初始化地图。如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。参考前面介绍的信息。

        2.panTo(center:Point[, opts:PanOptions]):将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果。

        3.panBy(x:Number, y:Number[, opts: PanOptions]):将地图在水平位置上移动x像素，垂直位置上移动y像素。如果指定的像素大于可视区域范围或者在配置中指定没有动画效果，则不执行滑动效果。

        4.reset():重新设置地图，恢复地图初始化时的中心点和级别。这个可以方便重新设置值。

        5.setCenter(center:Point|String):设置地图中心点。center除了可以为坐标点以外，还支持城市名。

        6.setCurrentCity(city:String):设置地图城市，注意当地图初始化时的类型设置为BMAP_PERSPECTIVE_MAP时，需要在调用centerAndZoom之前调用此方法设置地图所在城市。
        例如：
        var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); 注意：初始化的坐标应与您设置的城市对应，否则地图将无法正常显示。如果地图初始化为BMAP_NORMAL_MAP类型，则在调用setMapType切换地图类型时也要调用此方法。

        7.setMapType(mapType:MapTypes):设置地图类型。注意，当设置地图类型为BMAP_PERSPECTIVE_MAP时，需要调用map.setCurrentCity方法设置城市。

        8.setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions]):根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标。

        9.setZoom(zoom:Number):将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。

        10.highResolutionEnabled():是否使用高分辨率底图。仅当mapOptions.enableHighResolution属性为true且设备支持高分辨率时返回true。(Boolean)

        11.zoomIn():放大一级视图。

        12.zoomOut():缩小一级视图。

        13.addHotspot(hotspot:Hotspot):为地图添加热区。

        14.removeHotspot(hotspot:Hotspot):移除某个地图热区。

        15.clearHotspots():清空地图所有热区.

        以上方法还可以这样利用，就是当你设置一个控件的时候就可以调用上面的方法进行设置了。

    下面的控件方法，右键菜单方法，覆盖物方法，地图图层方法可以参考每个类说明的最后一个说明，这里就不说了，为了更好的分类运用。

    坐标变换：
        此方法就是像素点和成经纬度互相转换的方法。返回值就是相对的值。
        pixelToPoint(pixel:Pixel):像素坐标转换为经纬度坐标
        pointToPixel(point:Point):经纬度坐标转换为像素坐标。

    事件：
        这个分类我觉得还是比较重要的，毕竟效果是通过事件去实现的，所以，这些方法还是需要详细看看的：其中后面的括号为所要的参数。

        下面是鼠标点击事件，如果做移动Webapp的话，最好使用后面的触摸事件。
        1.click：左键单击地图时触发此事件。当双击时，产生的事件序列为： click click dblclick({type, target, point, pixel, overlay})
        2.dblclick：鼠标双击地图时会触发此事件。({type, target, pixel, point})
        3.rightclick：右键单击地图时触发此事件。当双击时，产生的事件序列为： rightclick rightclick rightdblclick ({type, target, point, pixel, overlay})
        4.rightdblclick：右键双击地图时触发此事件。({type, target, point, pixel, overlay})

        //web端移动事件
        5.maptypechange：地图类型发生变化时触发此事件。
        6.mousemove：鼠标在地图区域移动过程中触发此事件。({type, target, point, pixel, overlay})
        7.mouseover：鼠标移入地图区域时触发此事件。({type, target})
        8.mouseout：鼠标移出地图区域时触发此事件。({type, target})
        9.movestart：地图移动开始时触发此事件。({type, target})
        10.moving：地图移动过程中触发此事件。({type, target})
        11.moveend：地图移动结束时触发此事件。({type, target})
        12.zoomstart：地图更改缩放级别开始时触发触发此事件。({type, target})
        13.zoomend：地图更改缩放级别结束时触发触发此事件。({type, target})

        //添加覆盖物事件
        14.addoverlay：当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件。({type, target})

        //添加控件事件
        15.addcontrol：当使用Map.addControl()方法向地图中添加单个控件时会触发此事件。({type, target})
        16.removecontrol：当使用Map.removeControl()方法移除单个控件时会触发此事件。({type, target})
        17.removeoverlay：当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件。({type, target})
        18.clearoverlays：当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件({type, target})

        //拖拽事件
        19.dragstart：开始拖拽地图时触发。({type, target, pixel, point})
        20.dragging：拖拽地图过程中触发。({type, target, pixel, point})
        21.dragend：停止拖拽地图时触发。({type, target, pixel, point})

        //添加图层事件
        22.addtilelayer：添加一个自定义地图图层时触发此事件。({type, target})
        23.removetilelayer：移除一个自定义地图图层时触发此事件。({type, target})

        下面是加载事件
        24.load：调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块。({type, target, pixel, point, zoom})
        25.resize：地图可视区域大小发生变化时会触发此事件。({type, target, size})
        29.tilesloaded：当地图所有图块完成加载时触发此事件。({type, target})

        下面是热区地图的事件
        26.hotspotclick：点击热区时触发此事件。({type, target, size})
        27.hotspotover：鼠标移至热区时触发此事件。({type, target, size})
        28.hotspotout：鼠标移出热区时触发此事件({type, target, size})

        下面的是移动设备的事件
        30.touchstart：触摸开始时触发此事件，仅适用移动设备({type, target, point,pixel})
        31.touchmove：触摸移动时触发此事件，仅适用移动设备。({type, target, point,pixel})
        32.touchend：触摸结束时触发此事件，仅适用移动设备。({type, target, point,pixel})
        33.longpress：长按事件，仅适用移动设备。({type, target, point,pixel})

        有了事件，就需要说明事件的使用方法，其实百度地图使用的方法是回调机制，如下所示：
            Map.addEventListener("事件名称",function(){回调方法});
        当然，上面提到的括号后面的参数传递的方法传递到回调函数里面。

其实我们学完上面的基本上有一个逻辑思路就是：
首先，引入百度地图，其次，可以去百度地图的示例看下范例，当然，如果你熟悉百度地图的API完全可以直接看API，然后一般的都是通过new BMap.你要实现类实例化，他里面的参数基本上是一个配置项，可以去附近类的名字看下，然后就是看他有什么方法进行写，下面的那些类我就不记录了，有兴趣的去看看百度地图，然后自己玩下吧，嘿嘿，如果你喜欢，请为我点个赞哦！谢谢支持！