Loading

百度地图API 显示区域边界及地名定位

百度地图API 显示区域边界及地名定位

这个定位一共用了两个方法组成

一个是定位绘制区域边界线,另一个是地名定位

原理:

  当用户输入省、市、县、区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓,即调用getBoundary方法;

  当用户输入乡,街道,某个学校这样的小地名时,这是由于区域太小,不需要对这片区域描边时,我们再调用dw方法

<div id="l-map"></div>
    <div class="layout">
        <input id="value" value="青山湖区长春村" type="text">
     <input type="submit" onclick="pd()" value="定位"> </div>
//初始化地图
    var value='';var map = new BMap.Map("l-map");
    map.centerAndZoom('北京市',10);
    map.enableScrollWheelZoom();
//定位区域,小地名,使用本地检索方法
    var dw=function(){
        //value=document.getElementById('value').value;
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        
        local.setMarkersSetCallback(function(pois){
            map.clearOverlays();//清除所有覆盖物后,在叠加第一个点
            var marker = new BMap.Marker(pois[0].point);
            map.addOverlay(marker);
       })
        
        local.search(value);
        map.clearOverlays();
        
    }
//获取边界
    function getBoundary(){//获取边界       
    var bdary = new BMap.Boundary();
    bdary.get(value, function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {
                strokeWeight: 1,
                strokeColor: "#ff0000"
            }); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
            }                
        });   
    }   
//正则表达式,满足条件后调用
    var patter=/['省'|'市'|'区'|'县']$/;
    var pd=function(){
        value=document.getElementById('value').value;
        if(patter.test(value)==true){//关键字结尾是省市县区就调用下面方法
            getBoundary();
            if(/社区|小区$/.test(value)==true){//因为区后面结尾,会有小区和社区,即做了一个字方法
                dw();
            }
        }else{//关键字结尾没有省市县区结尾就调用此方法
            dw();
        }
    }

 

posted @ 2017-03-03 09:14  冯叶青  阅读(16976)  评论(0编辑  收藏  举报