百度地图jsapi在手机站里实现中心标注不随地图移动的效果

本例实现类似百度外卖手机站上的地图功能，地图中间有个标注点，拖动地图时中间点不随地图移动，效果可以查看此网址：http://www.totcms.com/map/marker.htm

下面说一下实现原理：

1、主要使用了百度的自定义控件方法，这里实现不难，主要难的在于控件的居中定位。因为通过查找百度的类说明中，其中提供的定位仅有

ControlAnchor

此常量表示控件的定位。

常量	描述
BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

所以根本没有可用的居中的属性。所以我们需要自己计算，下面会具体说明。

自定义控件的类代码如下 ：

//计算地图的尺寸以得出中心点应该所处的位移距离
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);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
	// 创建一个DOM元素
	var div = document.createElement("div");
	//div.innerHTML='aaaa';
	// 添加文字说明	
	// 设置样式	
	div.style.width = "19px";
	div.style.height = "24px";
	div.style.cursor = "pointer";
	div.style.background="url(images/markers_default.png) center no-repeat";
	// 绑定事件,点击一次放大两级
	div.onclick = function(e){
		map.setZoom(map.getZoom() + 2);
	}
	// 添加DOM元素到地图中
	map.getContainer().appendChild(div);
	//alert(map.getContainer().style.width);
	// 将DOM元素返回
	return div;
}
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);

上面的代码注释的比较详细了，关键在于前两行，我们通过map.getSize()方法获取地图的大小，进而可以计算出地图中心点的偏移距离是多少，这样无论地图如何移动，中间的标注点始终漂浮在地图中心。

2、获取地图的中心点的坐标

当地图移动后，我们此时就需要获取移动后中心点的坐标信息了，这里我们做了两个隐藏域字段，用于将获取到的坐标值赋值。

通过注册事件监听touchend事件获取地图移动后的中心点坐标，代码如下：

map.addEventListener('touchend', function(){
	var p = map.getCenter();
	document.getElementById('Lat').value=p.lat;
	document.getElementById('Lng').value =p.lng;
	document.getElementById('gsfrommap').style.display='block';	
});	

3、新的中心点坐标获取，后面就随你所想了，比如点击按钮直接跳转到你的检索程序获取指定坐标附近的**信息等等。