百度地图开发说明文档.doc

PAGE \* MERGEFORMAT4 -_ 百度地图说明文档 1.界面展示 界面整体分为4部分，主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。 主地图显示区用于除测距以外的功能显示，鼠标测距地图区只用于鼠标测距，结果面板区显示部分查询结果。 功能实现包括基本操作功能：鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距，其他功能有 定位查询（输入经纬度坐标在图上查询具体位置） 经纬度坐标获取（鼠标点击获取图上经纬度坐标） 快速查询（不同行政区级别点击查询缩放到当前位置，通过城市定位和关键字提示实现） 关键词查询（输入查询内容将查询结果显示到控制面板和图上） 覆盖物叠加（点击按钮将覆盖物添加到图上） 删除覆盖物（点击按钮删除覆盖物，包括关键字查询、路线查询在图上显示的覆盖物，用于清除查询结果，便于二次查询） 信息窗口（点击图上点覆盖物弹出信息窗口） 地址解析/逆解析、添加点线面（直接选用工具条上按钮进行绘制） 编辑功能（点击按钮开启/关闭编辑） 获取绘制的覆盖物个数，清除所有覆盖物 步行路线规划（包括地图上显示和结果面板显示） 驾车路线规划（信息窗口显示驾车所需时间和行驶距离，地图和结果面板显示路线） 公交车和地铁路线查询（输入公交车或地铁号，在结果面板显示经过的站点及发车信息） 公交车出行路线规划（地图上显示路线） 输入时关键字提示 右下角打开路况提示 以下为部分功能实现效果截图 关键字查询（结果显示在地图上） 关键字查询结果显示在结果面板 步行路线规划 驾车路线规划 公交车和地铁路线站点查询，结果显示在查询面板 公交路线规划 2.框架 界面先分成左右两部分，container1、container2分别占70%和30%，左侧上部为主地图allmap占70%，下部按钮输入区container3占30%，右侧鼠标测距区allmap1占30%，结果面板r-result占70%。 #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} //主地图 #allmap1{margin:0 0 3px;height:30%;} //鼠标测距地图 #r-result{margin:0 0 3px;height:70%;} 3.关于未实现的功能 点击折线、多边形显示信息窗口，点（marker类）覆盖物有打开/关闭信息窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折线和多边形（Polyline类和Polygon类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法getPath()返回值为ArrayPoint，然而实施过程中，无法获取到点数组，因此无法继续进行。 获取点线面的坐标以及编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据百度地图API中的示例DEMO将提示窗的信息存储到文本框。 附代码： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=viewport content=initial-scale=1.0, user-scalable=no / style type=text/css body, html{width: 100%;height: 100%;margin:0;font-family:微软雅黑;} #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} #allmap1{margin:0 0 3px;height:30%;} #r-result{margin