百度地图（webapi）实现地图拖动定位的功能

需求：拖动地图根据中心点定位，根据定位显示附近的信息，搜索提示

利用到的api：

• 当前定位——geolocation.getCurrentPosition()
• 根据城市搜索关键字——BMap.LocalSearch()
• 根据经纬度搜索附近的位置信息——http://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&output=json&pois=1&location=经纬度

---

一、引入百度地图webjs和jquery

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
<script type="text/javascript" src="./jquery.min.js"></script>

 

二、初始化地图

初始化地图包括——新建一个地图，添加原有控件

var map = new BMap.Map("container"); //新建地图
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(); //滚动缩放地图

 

三、自定义控件——实现移动地图定位***

tip：其实百度webjs并未提供类高德地图拖动后，通过中心点定位，这里只能模拟中心定位的方式，在地图上层固定一张定位的图片，定义拖动后的事件——获取中心点的位置。

1.定义控件类

（19*24是图片的大小）
var m_height=(map.getSize().height-24)/2;
var m_width=(map.getSize().width-19)/2;
// 定义一个控件类,即function
function ZoomControl(){
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(m_width,m_height);
}

2.控件继承百度地图的control属性***

ZoomControl.prototype = new BMap.Control();

3.实现initialize方法，并返回控件的DOM元素

ZoomControl.prototype.initialize = function(map){
    // 创建一个DOM元素    
    var div = document.createElement("div");
    div.style.width = "19px";
    div.style.height = "24px";
    div.style.cursor = "pointer";
    div.style.background="url(./markers_default.png) center no-repeat";
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    return div;
}

4.new 自定义控制器，添加到地图

var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);

 

四、获取当前的位置并移动到当前位置

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() === BMAP_STATUS_SUCCESS){ //调用成功
        map.panTo(r.point);
        map.centerAndZoom(r.point,15);
        var centerPixel = map.pointToOverlayPixel(map.getCenter());
        //通过设置地图的中心点，使定位点显示在手机上部分区域
        map.setCenter(map.overlayPixelToPoint({x:centerPixel.x,y:centerPixel.y+offsetY}));
        map.addEventListener('dragend',function(){
            //获得移动之后地图中心点的像素位置
            var pixel = map.pointToOverlayPixel(map.getCenter());
            //获得定位图标所在位置在地图上的地理位置，
            //实际上定位图标的像素位置就在地图中心像素位置相应的偏移量处
            var Point = map.overlayPixelToPoint({x:pixel.x,y:pixel.y-offsetY});
            console.info(Point);
            //获取周围地址信息
            getAroundAddress(Point)；
        });
    }else {
        alert('failed'+this.getStatus());
    }
});

 

五、添加local搜索和获取周围位置信息

1.获取localtion周围的位置信息

 

function getAroundAddress(point){
    var lng = $.trim(point.lng);
    var lat = $.trim(point.lat);
    var url = 'http://api.map.baidu.com/geocoder/v2/?ak=你的ak&output=json&pois=1&location='+ lat +',' + lng;
    $.ajax({
        type:'POST',
        url:url,
        ansyc:false,
        dataType:'JSONP',
        success:function(data){
            console.info(data);
        }
    })
}

Tip：这里的查询方法可能涉及到跨域请求的问题，需要在查询参数中添加callback=showLocation&jsoncallback=?，这边是指定查询方法的回调函数，将需要处理的业务放到回调函数showLocation()中。

2.本地关键词搜索

var options = {
    onSearchComplete: function(results){
        // 判断状态是否正确
        if (local.getStatus() == BMAP_STATUS_SUCCESS){
            var rhtm='';
            console.info(results);
            ........
            document.getElementById("results").innerHTML =rhtm;
        }
    }
};
var local = new BMap.LocalSearch(map, options);

六、结果显示

免费资源链接：http://note.youdao.com/noteshare?id=a0d2590dce5429886908a8882a2f5614&sub=04C24A71DD2446BFA12692E8F6824FD0