技术亮点
- 使用百度api实现了主要的地图功能
- 将地图DIV与游记功能结合
- 在API 尚不支持多个目的地的驾车导航的情况下自定义多个途经点的导航。
开发框架
Bootstrap词条
直接使用VScode中Bootstrap的扩展
实现功能
- 地图显示
在百度api中地图显示只需引入api后，创建地图容器和实例
var map = new BMap.Map("container");
//设置默认城市
map.setCurrentCity("广州");
//设置默认点坐标（小蛮腰），初始级别为15
var point = new BMap.Point(113.331084,23.112223);
map.centerAndZoom(point, 15);
//插入地图控件：缩放、比例尺、地图类型、缩略图
map.addControl(new BMap.NavigationControl()); //平移缩放
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略图
map.enableScrollWheelZoom(true);//开启滚轮。
- 本地搜索
BMap.LocalSearch 提供本地搜索服务，在使用本地搜索时需要为其设置一个检索区域，检索区域可以是BMap.Map 对象、BMap.Point 对象或者是省市名称（比如："广州市"）的字符串。BMap.LocalSearch 构造函数的第二个参数是可选的，您可以在其中指定结果的呈现。BMap.RenderOptions 类提供了若干控制呈现的属性，其中 map 指定了结果所展现的地图实例，panel 指定了结果列表的容器元素。
同时，BMap.LocalSearch也提供了若干配置方法，通过它们可以自定义搜索服务的行为以满足您的需求。
除了搜索结果会自动添加到地图和列表外，我们还可以通过数据接口获得详细的数据信息，结合地图api可以自行向地图添加标注和信息窗口。BMap.LocalSearch 和 BMap.LocalSearchOptions 类提供了若干设置回调函数的接口，通过它们可得到搜索结果的数据信息。
我们基于本地搜索功能，实现了锁定地物、标记地物、地物信息显示、设置地物为始发点，同时在进行测试之后我们加入了alert功能，优化用户体验。
部分代码块如下
//创建搜索实例，包括起点搜索和终点搜索，参考百度开发手册本地搜索修改
var startSearch =new BMap.LocalSearch(map,startOption);
var endSearch =new BMap.LocalSearch(map,endOption);
function mDriving(){
var startPlace = document.getElementById("startInput").value;
var endPlace = document.getElementById("endInput").value;
startSearch.search(startPlace);
endSearch.search(endPlace);
document.getElementById("box").style.display="block";
}
- 骑行路线（这里使用api中驾车导航）
BMap.DrivingRoute 提供驾车导航服务。其搜索范围可以设置为省。同时百度api提供了结果面板参数，方案描述可以展示到页面上。而且驾 车 导 航 服 务 也 提 供 了 丰 富 的 数 据 接 口 ， 通 过 onSearchComplete 回 调 函 数 可 以 得 到BMap.DrivingRouteResult 对象，它包含了驾车导航结果数据信息。
遗憾的是导航方案只包含一个目的地，那么驾车线路的个数就为1，如果方案包含若干个目的地，则驾车线路的个数会大于1。目前 API 尚不支持多个目的地的驾车导航。但通过点对象数组和创建折线，可以表面上生成多个目的地路线
for(c=0;c<pointList.length;c++){
var marker = new BMap.Marker(pointList[c]);
map.addOverlay(marker);
//将途经点添加到地图上
var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
var group = Math.floor( pointList.length /11 ) ;
var mode = pointList.length %11 ;
var driving = new BMap.DrivingRoute( map, {onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
var plan = driving.getResults().getPlan(0);
var num = plan.getNumRoutes();
alert("plan.num ："+num);
for(var j =0;j<num ;j++){
var pts= plan.getRoute(j).getPath(); //点数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
}
}
}});
for(var i =0;i<group;i++){
var waypoints = pointList.slice(i*11+1,(i+1)*11);
driving.search(pointList[i*11], pointList[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途经点
}
if( mode != 0){
var waypoints = pointList.slice(group*11,pointList.length-1);//段数应该-1
driving.search(pointList[group*11],pointList[pointList.length-1],{waypoints:waypoints});
}
）
//不确认目的地数目需要根据用户输入计算点数组个数，然而这样会出现多路线生成的情况，我们暂时未能提出解决方案。
鉴于我们的系统功能，我们只需生成一条路线即可
- 生成游记标题
使用document.execCommand("Copy")命令，将两个输入框的值赋予一个隐藏框即可实现
document.getElementById("temporary").value="##**"+document.getElementById("startInput").value+"**----**"+document.getElementById("endInput").value+"**";
网友评论