需求:拖动地图根据中心点定位,根据定位显示附近的信息,搜索提示
利用到的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);