上一篇: 百度地图API使用入门一

百度地图API使用入门二

  标签   地图          分类: 杂记

上一篇主要介绍了百度地图的基本组件，这一篇主要探讨一下百度地图可以提供的服务及扩展。

一、服务

1、搜索

LocalSearch用于位置检索、周边检索和范围检索，可以自定义结果的显示设置。包括：

  • 普通搜索：search方法。
  • 周边搜索：searchNearby方法，可指定坐标点和半径。
  • 矩形范围搜索：searchInBounds方法，可指定一个Bounds做为搜索的矩形区域。

下例是在地图上搜索“联通营业厅”，并在地图上显示：

var local = new BMap.LocalSearch(map, { 
  renderOptions: {
    map: map
  }
});
local.search('联通营业厅');

2、导航和路况

  • 公交导航：TransitRoute 导航要提供起点和终点。返回的结果是TransitRouteResult。

    下例是公交导航结果：

      var transit = new BMap.TransitRoute(map, {
    renderOptions: {
      map: map
    }
  });
  transit.search("古平岗", "雨花大数据园");
  • 驾车导航：DrivingRoute 导航要提供起点和终点。返回的结果是DrivingRouteResult。

  • 步行导航：WalkingRoute 导航要提供起点和终点。返回的结果是WalkingRouteResult。

    下例是把导航结果显示在“r-result”面板上：

      var walking = new BMap.WalkingRoute(map, {
    renderOptions: {
      map: map,
      panel: "r-result", // 显示结果的面板
      autoViewport: true
    }
  });
  walking.search("古平岗", "新模范马路");

3、位置信息服务

地址解析 Geocoder

  • 根据地址描述获得坐标： 
      var myGeo = new BMap.Geocoder();      
  // 将地址解析结果显示在地图上，并调整地图视野    
  myGeo.getPoint("南京市古平岗4号", function(point){      
    if (point) {      
      map.centerAndZoom(point, 16);      
      map.addOverlay(new BMap.Marker(point));      
    }      
  }, "南京市");
  • 反向地理编码： 
      var myGeo = new BMap.Geocoder();      
  // 根据坐标得到地址描述    
  myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
      alert(result.address);      
    }      
  });

本地城市 LocalCity

获取用户所在的城市位置信息。

var myCity = new BMap.LocalCity();

二、扩展工具

工具是百度地图提供的开源库，要使用工具中的功能要把开源库导入。按照我的理解我把它们分成几类：

1、地图标注类：这些工具主要是对地图的标注信息功能进行扩展。如：

  • MarkerTool：自定义标注点和标注点信息。
  • MarkerCluster：解决加载大量点要素到地图上产生覆盖现象的问题。
  • TextIconOverley：自定义覆盖物扩展。
  • 等等。

2、路线类

  • LuShu：百度地图的路书。实现marker沿路线运动，并有暂停等功能。
  • DistanceTool：测量地图上自定义线段的距离。
  • DrawingManager：提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。

3、可视化扩展

  • 大数据可视化库：用来展示大量地理信息数据，可以自定义类型。
  • 热力图：提供热力图可视化展现功能。

三、实例

现在我们完成一个功能：在地图上添加一个搜索框，用户可以自定义标记点，并提供从用户坐标到标注点的公交路线服务。

1、首先注册百度开发者，创建一个应用，拿到应用密钥。

2、创建一个HTML文件，引入百度地图API

注意替换掉密钥。由于我们还用到三个扩展，所以还用引入SearchControl，MarkerTool和SearchInforWindow。 secret_key.png

3、在一个单独的js文件中写代码

以下只介绍几个主要功能的实现：

  • 获取用户坐标

    坐标可以在GeoLocation对象的getCurrentPosition方法中的回调函数中得到：

    var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function getCoords(r) {
  if (this.getStatus() === BMAP_STATUS_SUCCESS) {
    start = new BMap.Point(r.point.lng, r.point.lat);
}
  • 添加搜索框 
    var searchControl = new BMapLib.SearchControl({
  container: 'searchbox', //存放控件的容器
  map: map, //关联地图对象
  type: LOCAL_SEARCH //检索类型
});
  • 添加自定义信息窗口 
    var infoWindow = new BMapLib.SearchInfoWindow(map, '', {
  width: 290,
  height: 105,
  title: '您的位置', // 信息窗口标题
  panel: 'panel', //检索结果面板
  enableAutoPan: true,
  searchType: [
    BMAPLIB_TAB_SEARCH, //周边检索
    BMAPLIB_TAB_TO_HERE, //到这里去
    BMAPLIB_TAB_FROM_HERE //从这里出发
  ]
});

    效果：

    infowindow2.png

  • 添加自定义标注 
    // 图上标注
var mkrTool = new BMapLib.MarkerTool(map, {
  autoClose: true,
  followText: '标注'
});

// 点击右键表示标注功能开启
map.addEventListener('rightclick', function (e) {
  mkrTool.open();
});
  • 公交路线获取和展示 
    walking = new BMap.TransitRoute(map, {
  renderOptions: {
    map: map,
    panel: 'result' // 信息展示区域ID
  },
  onResultsHtmlSet: function () { // 得到公交路线之后的回调函数：显示结果到result面板
    $('#result').show(); 
  }
});

    完整代码请看。

上一篇: 百度地图API使用入门一