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

资源描述

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

《百度地图开发说明文档.docx》由会员分享，可在线阅读，更多相关《百度地图开发说明文档.docx（28页珍藏版）》请在冰点文库上搜索。

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

XX地图开发说明文档

XX地图说明文档

1.界面展示

界面整体分为4部分，主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。

主地图显示区用于除测距以外的功能显示，鼠标测距地图区只用于鼠标测距，结果面板区显示部分查询结果。

功能实现包括基本操作功能：

鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距，其他功能有

（1）定位查询（输入经纬度坐标在图上查询具体位置）

（2）经纬度坐标获取（鼠标点击获取图上经纬度坐标）

（3）快速查询（不同行政区级别点击查询缩放到当前位置，通过城市定位和关键字提示实现）

（4）关键词查询（输入查询内容将查询结果显示到控制面板和图上）

（5）覆盖物叠加（点击按钮将覆盖物添加到图上）

（6）删除覆盖物（点击按钮删除覆盖物，包括关键字查询、路线查询在图上显示的覆盖物，用于清除查询结果，便于二次查询）

（7）信息窗口（点击图上点覆盖物弹出信息窗口）

（8）地址解析/逆解析、添加点线面（直接选用工具条上按钮进行绘制）

（9）编辑功能（点击按钮开启/关闭编辑）

（10）获取绘制的覆盖物个数，清除所有覆盖物

（11）步行路线规划（包括地图上显示和结果面板显示）

（12）驾车路线规划（信息窗口显示驾车所需时间和行驶距离，地图和结果面板显示路线）

（13）公交车和地铁路线查询（输入公交车或地铁号，在结果面板显示经过的站点及发车信息）

（14）公交车出行路线规划（地图上显示路线）

（15）输入时关键字提示

（16）右下角打开路况提示

以下为部分功能实现效果截图

关键字查询（结果显示在地图上）

关键字查询结果显示在结果面板

步行路线规划

驾车路线规划

公交车和地铁路线站点查询，结果显示在查询面板

公交路线规划

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:

003px;height:

70%;}//主地图

#allmap1{margin:

003px;height:

30%;}//鼠标测距地图

#r-result{margin:

003px;height:

70%;}

3.关于未实现的功能

点击折线、多边形显示信息窗口，点（marker类）覆盖物有打开/关闭信息窗方法openInfoWindow（infoWnd:

InfoWindow）/closeInfoWindow（），但是折线和多边形（Polyline类和Polygon类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法getPath（）返回值为Array，然而实施过程中，无法获取到点数组，因此无法继续进行。

获取点线面的坐标以及编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据XX地图API中的示例DEMO将提示窗的信息存储到文本框。

附代码：

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:

003px;height:

70%;}

#allmap1{margin:

003px;height:

30%;}

#r-result{margin:

003px;height:

70%;}

dl,dt,dd,ul,li{

margin:

padding:

list-style:

none;

}

p{font-size:

12px;}

dt{

font-size:

14px;

font-family:

"微软雅黑";

font-weight:

bold;

border-bottom:

1pxdotted#000;

padding:

5px05px5px;

margin:

5px0;

}

dd{

padding:

5px005px;

}

li{

line-height:

28px;

}

--加载鼠标绘制工具-->

hidden;zoom:

1;position:

relative;">

100%;-webkit-transition:

all0.5sease-in-out;transition:

all0.5sease-in-out;">

varinfoWindow1=newBMap.InfoWindow（"天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门"）;//创建信息窗口对象