网络地理信息系统李猛
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网络地理信息系统
实验报告
班级:地理1201
学号:120050115
姓名:李猛
指导教师:李俊付
实验一百度地图API引入
一、实验内容
1、引入百度地图api,实现地图展示功能
二、实验步骤
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以河北工程大学作为地图的中心:
准备页面
根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明:
Transitional//EN""/TR/xhtml1/DTD/xhtml1-transiti onal.dtd">
下面添加一个meta标签,以便使您的页面更好的在移动平台上展示。
接着引用百度地图的js脚本
接着设置样式,给地图设置一个容器元素div
引用百度地图API文件使用V1.4及以前版本的引用方式:创建地图容器元素地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。
命名空间 API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。
创建地图实例
var map = new BMap.Map("dituContent");
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以用元素id.
创建点坐标
var point = new BMap.Point(116.69034,39.54352);
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中114.513923表示中心点的经度,36.576754表示中心点的纬度。
地图初始化
map.centerAndZoom(point, 15);
创建地图实例后,对其进行初始化,BMap.Map.centerAndZoom()方法设置中心点坐标和地图级别,然后才可以执行其他操作。
地图配置与操作
地图被实例化并完成初始化以后,就可以与其进行交互了。它支持鼠标拖拽、滚轮缩放、双击放大等功能。您也可以修改配置来改变这些功能。配置选项可以在Map类参考的配置方法一节中找到。
此外,还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。
下面是通过代码展示的地图,中心点是廊坊市中心
实验二百度地图控件了解
一、实验内容
熟悉百度地图api提供的控件
二、实验步骤
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件,还可以通过Control类来实现自定义控件。
地图API中提供的控件有:
Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类可实现自定义控件。
NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
ScaleControl:比例尺控件,默认于地图左下方,显示地图的比例关系。
MapTypeControl:地图类型控件,默认位于地图右上方。
CopyrightControl:版权控件,默认位于地图左下方。(不允许删除)
GeolocationControl:定位控件,针对移动端开发,默认于地图左下方。
向地图添加控件
可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行
初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({ anchor:
BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav);
其他的控件添加方法一样,只是名称不同
控制控件位置
初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。
控件停靠位置 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。anchor 允许的值为:
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移量使二者分开显示。比如:地图类型控件和城市列表控件默认位置都是地