为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
JavaScript

学完基础的控件类的设置和操作,我觉得有必要对核心类进行一个归类了,可以参考一下的核心类,其中对于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.你要实现类实例化,他里面的参数基本上是一个配置项,可以去附近类的名字看下,然后就是看他有什么方法进行写,下面的那些类我就不记录了,有兴趣的去看看百度地图,然后自己玩下吧,嘿嘿,如果你喜欢,请为我点个赞哦!谢谢支持!

点击查看更多内容
15人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
33
获赞与收藏
1498

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消