我是 PHP 程序员

前段时间，因为项目需求，用到了百度地图的一些功能，总结一下：
1. 判断地图是否加载完毕事件；
2. 获取可视区域的坐标点；
3. 标点并判断标点所属城市；
4. 百度地图关键字搜索功能；
5. 连续标点并实现测距功能。

判断地图是否加载完毕事件：

有时候，我们希望在地图正在加载过程中时，不要处理某些事，而是在地图加载完毕之后再处理，这时候即可用到此事件：

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
//添加地图是否加载完毕的事件
map.addEventListener("tilesloaded",function(){//地图加载完毕
    //处理逻辑...
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7

获取可视区域的坐标点

比如，有很多个坐标点需要加载，如果一次性加载出来肯定就很慢，我们可以考虑只加载当前可视区域里需要加载的坐标点，非可视区域的不加载。
如图所示：

使用map类的getBounds()方法即可获取可视区域信息，返回值是个类（Bounds）实例，返回类中可用的方法可查阅 百度地图API参考说明文档：Bounds。

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
//添加地图是否加载完毕的事件
map.addEventListener("tilesloaded",function(){//地图加载完毕
    var bs,bssw,bsne;
    bs = map.getBounds();   //获取可视区域
    bssw = bs.getSouthWest();   //可视区域左下角
    bsne = bs.getNorthEast();   //可视区域右上角
    //console.log("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

    //加载可视区域内已保存的标点
    //略...
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

标点并判断标点所属城市

场景：在地图上标点时，只希望标注本城市内的点，非本城市的不希望标点，即为百度的逆地址解析功能。
百度地图API类参考说明文档：Geocoder 和 GeocoderResult
百度地图逆地址解析示例

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geoc = new BMap.Geocoder();
    var city = '北京';

    //鼠标点击触发事件
    map.addEventListener("click", function(e){        
        var pt = e.point; //获取标点
        geoc.getLocation(pt, function(rs){
            //返回地址描述信息，是个字符串，比如：北京市丰台区海鹰路9号
            var add = rs.address;

            //返回结构化的地址描述信息，是个对象，返回省、市、县等信息
            var addComp = rs.addressComponents;
            //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

            //判断标点所属城市，非本城市不允许标点
            if(addComp.city != city){
                alert('只能在本城市范围内标点');
                return false;
            }
        });        
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

百度地图关键字搜索功能

根据关键词搜索指定位置，并标点，有可返回多个搜索结果，下面实例只使用了第一个标点：
百度地图API类参考说明文档：LocalSearch 和 LocalSearchOptions
百度地图关键字检索示例

//获取文本框中的关键词
var keyword = document.getElementById('keyword').value;
if(!keyword) return false;
var local = new BMap.LocalSearch(map, {
    renderOptions:{map: map}, //展现结果的地图实例。当指定参数map后，搜索结果的标注、线路等均会自动添加到此地图上
    pageCapacity:1, //设置每页容量，取值范围：1 - 100，对于多关键字检索，容量表示每个关键字的数量，如果有2个关键字，则实际检索结果数量范围为：2 - 200
    //onSearchComplete 检索完成后的回调函数。 参数：results: LocalResult或Array 如果是多关键字检索，回调函数参数返回一个LocalResult的数组，数组中的结果顺序和检索中多关键字数组中顺序一致
    onSearchComplete: function(results){
        //local.getStatus()返回的状态码
        if (local.getStatus() == BMAP_STATUS_SUCCESS){
            var objpoint=results.getPoi(0).point; //获取第一个智能搜索的结果
            if(!objpoint){
                alert("不能匹配到位置: " + keyword);
            }else{
                map.centerAndZoom(objpoint, 18); //设置中心点
                map.addOverlay(new BMap.Marker(objpoint));//添加标注
            }
        }
        local.clearResults(); //清除最近一次检索的结果
    }
});
//forceLocal表示是否将搜索范围约束在当前城市
local.search(keyword,{forceLocal:true});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

连续标点并实现测距功能

该功能类似于地图的测距，但根据自己项目需要又会复杂一些，同时也用到了上面提到的一些功能，具体描述如下：
1. 点击“开始标点”按钮后，才能开始标点并测距；
2. 只能在本城市范围内标点，非本城市的不允许标点；
3. 每标一个点显示已标完的总距离（按米为单位计量），未标下一个点时，显示鼠标点与上一个点的距离；
4. 标点完一段，双击结束标点，点击“确认提交”后，弹框提示：“确定提交吗？”点取消，停留在当前页可继续标点，点确定，则保存标点；
5. 标点成功保存后，不刷新该页面，地图上显示该次标点的所有坐标点（红色图标表示已保存的标点，蓝色表示正在标点的），但不再显示测距时的直线和距离；
6. 再次加载该页面时，要在地图中展示保存过的标点，但只展示可视范围内的标点；
7. 百度地图默认比例尺设置为20米；
8. 提供搜索功能，方便定位要标点的位置；
9. 若比例尺缩放的较大，当前可视范围展示所有标点，加载也会很慢(标点比较多时)，此种情况考虑只标部分点。

由于代码过多，放在git上了https://github.com/huohuanyu/mappoint。