webgis前端地图功能展示

技术亮点

• 使用百度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+"**";