百度地图使用

最近要在微信增加地图功能，尝试了一下百度地图。下面仅对自己用到的功能进行了简单整理，方便自己查阅使用。

官方文档已经十分详细，更多信息可以直接查看：
概述：http://lbsyun.baidu.com/index.php?title=jspopular
示例：http://developer.baidu.com/map/jsdemo.htm
类参考：http://developer.baidu.com/map/reference/index.php

---

---

整理内容：

一、获取AK，引入JS文件
二、基本使用
1、创建地图、添加控件、设置中心点与缩放比例
2、坐标点
3、不同标准的坐标点转换
4、获取两点间距离
5、操作标注(类似DOM的操作)
6、添加事件：使用addEventListener绑定
三、坐标与路名的转换：Geocoder
四、关键字查询：LocalSearch
五、消息窗口
1、普通消息窗口
2、带检索功能的消息窗口
六、路线规划：步行、驾车、公交
七、云lbs数据：LocalSearch可以搜索自定义的数据
八、其它

---

一、获取AK，引入JS文件

1、注册账号，登陆百度地图API控制台 http://lbsyun.baidu.com/apiconsole/key
2、创建应用(类别：服务端)，获取AK。IP范围按实际情况设置。
嫌麻烦就直接 0.0.0.0/0
3、引入JS文件：

二、基本使用：

1、创建地图、添加控件、设置中心点与缩放比例

2、坐标点：

坐标点是地图中最为常用的一个东西，几乎所有的内容都需要依靠坐标点来指定。
注意：此处的经纬度需要是百度标准的。

var lng = 120;  //经度
var lat = 30;  //纬度
var point = new BMap.Point(lng, lat);

3、不同标准的坐标点转换：

如果获取到的坐标不是百度标准，需要进行转换，否则会导致位置的偏移。
(比如获取到 GPS坐标：wgs84标准 火星坐标：gcj02标准)

//获取到 wgs84标准的坐标点
var lng_wgs84 = 120;
var lat_wgs84 = 30;
var point_wgs84 = new BMap.Point(lng_wgs84, lat_wgs84);

var convertor = new BMap.Convertor();
//第二个参数是原标准，第三个参数是新标准
//1--wgs84  5--bd09ll
convertor.translate(new Array(point_wgs84), 1, 5, function (data) {
    if (data.status === 0) {
       data.points[0];  // data.points[n] 转换成功后的坐标点
    }
});

4、获取两点间距离：

var distance = map.getDistance(point1, point2);

5、操作标注(类似DOM的操作)：

//生成坐标点
var point = new BMap.Point(lng, lat);

//根据坐标点 创建标注
var marker = new BMap.Marker(point);  //默认样式
var marker = new BMap.Marker({icon:new BMap.Icon("url", new BMap.Size(10, 10))});  //自定义图标

//给标注增加文本框（类似DOM的文本节点）
var Label = new BMap.Label("title", {offset: new BMap.Size(0, -20)});  //文本框
marker.setLabel(Label);

//设置标注是否可以 拖拽
marker.enableDragging();  //可拖拽
marker.disableDragging();  //不可拖拽

//添加到地图上(类似DOM 将新节点加入到页面中)
map.addOverlay(marker);

//删除标注：
map.removeOverlay(marker);  //删除具体标注
map.clearOverlays();  //删除所有覆盖物(除了删除标注，还会删除其它内容)

6、添加事件：使用addEventListener绑定

//地图 点击事件
map.addEventListener("click", function(e){});

//标注 点击事件
marker.addEventListener("click", function(e){
  //event.stopPropagation();  //可以防止事件冒泡
});

//标注 拖拽(结束)事件：
marker.addEventListener("dragend", function (type, target, pixel, point) {
    //type.point  拖拽后的点
});

三、坐标与路名的转换：Geocoder

//创建 Geocoder对象
var geocoder = new BMap.Geocoder();

// 坐标-->路名：
geocoder.getLocation(point, function (geocoder_result) {
    geocoder_result.address;
}

// 路名-->坐标：
geocoder.getPoint(address, function (point) {
    if(point){  //注意：可能解析失败
        //具体操作
    }
}, "上海市");

四、关键字查询：LocalSearch

var local = new BMap.LocalSearch(map, {
    onSearchComplete: function(results){
        console.log(local.getStatus());  //返回查询是否成功  BMAP_STATUS_SUCCESS == 0
        console.log(results.getNumPois());  //返回结果总数
        console.log(results.getCurrentNumPois());  //返回当前页结果总数 默认10
        console.log(results.getPoi(0));  //返回具体第几条数据
        console.log(results.getPoi(1));

        if (local.getStatus() == BMAP_STATUS_SUCCESS){
            //查询成功，具体操作
            for (i = 0; i < results.getCurrentNumPois(); i++) {
                 results.getPoi(i).point;
                results.getPoi(i).title;
            }
        }
    }
});
local.setPageCapacity(100);  //设置 一次返回最大数量 最大为100
local.searchNearby('key_word', point, 1000);  //设置范围 point的1000米内
local.searchNearby('key_word', point);  //第三个参数为空，则为最近的

五、消息窗口：

1、普通消息窗口：

//其中content完全可以写入 html内容 比如 button等
var infoWindow = new BMap.InfoWindow("content", {width: 200, height: 200});
map.openInfoWindow(infoWindow, point);  //在point位置显示出来

2、带检索功能的消息窗口(功能多点)：需要多引入文件

var searchInfoWindow = new BMapLib.SearchInfoWindow(map, 'content', {
    title  : "title",
    width  : 200,
    height : 20,
    panel  : "panel",  //检索结果面板 div 的 id
    enableAutoPan : true,     //自动平移
    searchTypes : [  //设置功能内容
        BMAPLIB_TAB_SEARCH,    //周边检索
        BMAPLIB_TAB_TO_HERE,   //到这里去
        BMAPLIB_TAB_FROM_HERE  //从这里出发
    ]
});
searchInfoWindow.open(marker/point);  //传入显示的位置：marker或point

六、路线规划：步行、驾车、公交

//在下一次的查询前，手动清除上一次的路线(覆盖物)
map.clearOverlays();  //或者自定义清除方式

//步行路线
var walking_route = new BMap.WalkingRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route",  //路线 文字版显示位置：div的id值
        autoViewport: true
    }
});
walking_route.search(point_departure, point_destination);  //起点, 终点

//驾车路线
//BMAP_DRIVING_POLICY_LEAST_TIME  0  最少时间
//BMAP_DRIVING_POLICY_LEAST_DISTANCE  1  最短距离
//BMAP_DRIVING_POLICY_AVOID_HIGHWAYS  2  避开高速
var driving = new BMap.DrivingRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route",  //路线 文字版显示位置：div的id值
        autoViewport: true
    }, policy: 0  //规则
});
driving.search(point_departure, point_destination);  //起点, 终点

//公交路线
//BMAP_TRANSIT_POLICY_LEAST_TIME  0  最少时间
//BMAP_TRANSIT_POLICY_LEAST_TRANSFER  2  最少换乘
//BMAP_TRANSIT_POLICY_LEAST_WALKING  3  最少步行
//BMAP_TRANSIT_POLICY_AVOID_SUBWAYS  4  不乘地铁
var transit = new BMap.TransitRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route"  //路线 文字版显示位置：div的id值
    }, policy: 0  //规则
});
transit.search(point_departure, point_destination);  //起点, 终点


//可以单独设置规则：比如在下拉框中进行选择：
driving.setPolicy(n);
transit.setPolicy(n);

七、云lbs数据：LocalSearch可以搜索自定义的数据

1、添加数据：
API控制面板--数据管理平台：http://lbsyun.baidu.com/data/mydata
创建表，编辑具体需要的坐标点信息
2、需要选择：是否将数据发布至云检索
3、根据表ID进行搜索

localsearch.searchNearby('keyword', point, 999, {customData: {geotableId: 123456}});

八、其它：

1、因为用在微信端，微信JS来定位，所以上面没有涉及百度地图的定位。
2、去除百度地图的logo图标：隐藏图标的div

.anchorBL {
    display: none;
}

3、使用Geocoder类进行坐标与路名的转换，只能取得具体的路名(xx路xx号)，而没有地点名(xx大楼)。
如果需要后者，得用LocalSearch。
4、标注的跳动动画，在移动端尝试无效果。