百度api使用心得体会

最近项目中在使用百度地图api，对于其中的一些有用的点做一些归纳整理，如有不对的地方，欢迎各位大神纠正指出。

一定要学会查找百度地图api提供的类参考网站：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html，这个能加快对于地图的属性，方法等的应用。

一、创建地图

插入一个div用作地图的容器，地图的大小样式可根据项目需求对样式大小进行修改。

<style type="text/css">
        body, html, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:;
            font-family: "微软雅黑";
        }
</style>

<div id="map"></div>

在html页中引入api所需要的js库 如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script type="text/javascript">
 var map = new BMap.Map("map"); // 创建Map实例
 var lng=113.672743;//经度
 var lat=34.766299;//纬度
 var point = new BMap.Point(lng, lat);
 map.centerAndZoom(point, 14);
</script>

如果没有密钥可以去百度地图api官网注册一个密钥。

这样我们就实现好了一个以郑州为中心点（根据经纬度坐标），地图缩放比例是14的地图。

经纬度的获取可以通过下面百度提供的网站进行抓取：http://api.map.baidu.com/lbsapi/getpoint/index.html。

二、地图标志

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 定义 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl();  // 定义 左上角，添加默认缩放平移控件
map.addControl(top_left_control);//添加
map.addControl(top_left_navigation);//添加

addControl的方法是添加图控件，例如：比例尺，缩放的滚轴等。关于地图上的控件可以查看百度api的示例，根据自己的需要进行添加，地址如下：http://lbsyun.baidu.com/jsdemo.htm#a1_2。

另外在项目中需要去掉百度左下角的logo及下面附属的文字，可对左下角样式进行定义去除：

 .anchorBL {
            display: none;
        }

三、查找

查找的示例:

        var local = new BMap.LocalSearch(map, {
            renderOptions: { map: map }
        });
        local.search("景点");

关于查找我们可以详细看下LocalSearch这个类，其中查找的方法有search，searchInBounds，searchNearby这三个。

search(keyword: String | Array<String>, option: Object)：根据检索词发起检索，当keyword为数组时将同时执行多关键字的查询，最多支持10个关键字。

searchInBounds(keyword: String | Array<String>, bounds: Bounds, option: Object)：根据范围和检索词发起范围检索，当keyword为数组时将同时执行多关键字检索，最多支持10个关键字。（这个方法我用到的少，主要是因为bounds没时间研究）

searchNearby(keyword: String | Array<String>, center:LocalResultPoi| String | Point, radius: Number, option: Object)：根据中心点、半径与检索词发起周边检索。当keyword为数组时将同时执行多关键字的检索，最多支持10个关键字。（这个方法再项目中用到的比较多，项目功能是实现楼盘周边配套施设的）。

对于LocalSearch中的renderOptions中还包含了一个回调函数onSearchComplete，在项目中的应用比较广泛：

可以这样定义：

onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
//执行操作
}
}

其中results表示的搜索到的结果集，像例子中就表示是郑州周边的景点的结果集。

results中常用到的属性和方法有：

results.getCurrentNumPois()：表示获取当前页结果集所有的点。当页显示多少可以再renderOptions中定义，比如：pageCapacity: 20，表示显示20个。

results.getPoi(1).point.lng：获取结果集第一个点的经度。

results.getPoi(1).point.lat：获取结果集第一个点的纬度。

results.getPoi(1).point.title：获取结果集第一个点的名称。

results.getPoi(1).point.address：获取结果集第一个点的地址。

results.getPoi(1).point.phoneNumber：获取结果集第一个点的电话。

map.getDistance：可以根据经纬度计算两点间的距离，如果用的到可以拓展路线，打车等服务（详情参考：TaxiFare类）。

四、遮盖物

有的时候我们需要对地图上点进行标记等操作，这时候我们就需要对其添加遮盖物，比较常见的有圆形，矩形，三角形等不规则的简单遮盖层，这些百度地图给的例子中有详细介绍以及demo。这里我就说一说项目中用到的复杂自定义遮盖物。

实现思路是通过画图的方式，根据点的坐标，通过var pixel = map.pointToOverlayPixel(this._point);这句代码把坐标跟屏幕的像素进行转换，以得到遮盖物在屏幕上显示的横纵坐标，并赋值给left和top属性。

最后通过map.addOverlay(遮盖物对象)方法，添加遮盖物。清楚遮盖无是 map.clearOverlays()。

详情可以参考：http://lbsyun.baidu.com/jsdemo.htm#c1_11中的覆盖物示例中的添加自定义覆盖物，我是根据这个方法进行修改，实现了地图找房，楼盘周边交通示例等功能。

以上是我最近使用百度地图api的一些心得体会，第一次写博客，有什么不到位的，还请大牛们包含，欢迎指错。