PDF《百度地图 JavaScript API》

这里我们使用 BMap 命名空间下的 Point 类来创建一个坐标点.Point 类描述了一个地理坐标点,其中 116.404表示经度,39.915表示纬度. 地图初始化 map.centerAndZoom(point, 15);

在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和 地图级别. 地图必须经过初始化才可以执行其他操作. 地图配置与操作 地图被实例化并完成初始化以后,就可以与其进行交互了.API 中的地图对象的外观与行为与百度地图网 站上交互的地图非常相似.它支持鼠标拖拽、滚轮缩放、双击放大等交互功能.您也可以修改配置来改变 百度地图 JavaScript APIv1.4 开发指南

9 这些功能. 比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验, 但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用 map.enableScrollWheelZoom 方法来开启. 配置选项可以在 Map 类参考的配置方法一节中找到. 此外, 您还可以通过编程的方式与地图交互. Map 类提供了若干修改地图状态的方法. 例如: setCenter()、 panTo()、zoomTo()等等. 下面示例显示一个地图, 等待两秒钟后, 它会移动到新中心点. panTo()方法将让地图平滑移动至新中心点, 如果移动距离超过了当前地图区域大小,则地图会直跳到该点. var map = new BMap.Map( container );

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 39.918));

}, 2000);

控件 地图控件概述 百度地图上负责与地图交互的 UI 元素称为控件. 百度地图 API 中提供了丰富的控件, 您还可以通过 Control 类来实现自定义控件. 地图 API 中提供的控件有: ? Control:控件的抽象基类,所有控件均继承此类的方法、属性.通过此类您可实现自定义控件. ? NavigationControl:地图平移缩放控件,PC 端默认位于地图左上方,它包含控制地图的平移和缩放的 功能.移动端提供缩放控件,默认位于地图右下方. ? OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图. ? ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系. ? MapTypeControl:地图类型控件,默认位于地图右上方. ? CopyrightControl:版权控件,默认位于地图左下方. ? GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方 向地图添加控件 可以使用 Map.addControl()方法向地图添加控件.在此之前地图需要进行初始化.例如,要将标准地图控 件添加到地图中,可在代码中添加如下内容: var map = new BMap.Map( container );

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

map.addControl(new BMap.NavigationControl());

百度地图 JavaScript APIv1.4 开发指南

10 可以向地图添加多个控件.在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控 件.在地图中添加控件后,它们即刻生效. map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.OverviewMapControl());

map.addControl(new BMap.MapTypeControl());

map.setCurrentCity( 北京 );

// 仅当设置城市信息时,MapTypeControl 的切换功能才能可用 控制控件位置 初始化控件时,可提供一个可选参数,其中的 anchor 和offset 属性共同控制控件在地图上的位置. 控件停靠位置 anchor 表示控件的停靠位置,即控件停靠在地图的哪个角.当地图尺寸发生变化时,控件会根据停靠位置 的不同来调整自己的位置.anchor 允许的值为: BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角. BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角. BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角. BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角. 百度地图 JavaScript APIv1.4 开发指南