百度地图显示标注,标注信息为数据库查询的数据

百度地图基本操作

<pre class="javascript" name="code">	var map = new BMap.Map("allmap");                        // 创建Map实例
	var point = new BMap.Point(120.170507,30.276462);  //以指定的经度和纬度创建一个地理点坐标,(创建坐标点)
	map.centerAndZoom(point, 11);     // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
	map.centerAndZoom(point, 11);		//对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。

	var map = new BMap.Map("allmap");                        // 创建Map实例
	var point = new BMap.Point(120.170507,30.276462);  //以指定的经度和纬度创建一个地理点坐标,(创建坐标点)
	map.centerAndZoom(point, 11);     // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
	map.centerAndZoom(point, 11);		//对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。

实现简单标注,以及标注上的点击事件

<script type="text/javascript">
	var map = new BMap.Map("allmap");                        // 创建Map实例
	var point = new BMap.Point(120.170507,30.276462);  //以指定的经度和纬度创建一个地理点坐标
	map.centerAndZoom(point, 11);     // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	//map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	//map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
	map.centerAndZoom(point, 11);		//对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
	

	//用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
	var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), {
	    anchor: new BMap.Size(10, 30),				//图标的定位点相对于图标左上角的偏移值
	    infoWindowAnchor: new BMap.Size(10, 0)		//信息窗口开启位置相对于图标左上角的偏移值
	});

	var mkr = new BMap.Marker(new BMap.Point(120.170507,30.276462), {//创建一个图标实例
	    icon: icon
	});
	
	var opts = {
	  width : 200,     // 信息窗口宽度	如果指定的宽度为0，则信息窗口的宽度将按照其内容自动调整
	  height: 0,     // 信息窗口高度	如果指定的高度为0，则信息窗口的高度将按照其内容自动调整
	  title : "海底捞王府井店" , // 信息窗口标题
	  enableMessage:false//设置允许信息窗发送短息
	  //message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"  这个是指短信内容
	}

	var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
	mkr.addEventListener("click", function(){this.openInfoWindow(infoWindow);});	//在图标实例上添加鼠标点击事件
	
	//添加鼠标点击事件也可简写为如下形式,可以方便在循环添加事件使用闭包的时候使用
	//mkr.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("地址：市东城区王府井大街88号乐天银泰百货八层",{width : 200,height: 0,title : "海底捞王府井店",enableMessage:false}));});
	
	
	
	map.addOverlay(mkr);		//将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
</script>

 

用for循环为标注添加鼠标点击事件

	var map = new BMap.Map("allmap");                        // 创建Map实例
	var point = new BMap.Point(120.170507,30.276462);  //以指定的经度和纬度创建一个地理点坐标,(创建坐标点)
	map.centerAndZoom(point, 11);     // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
	map.centerAndZoom(point, 11);		//对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
	

	//用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
	var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), {
	    anchor: new BMap.Size(10, 30),				//图标的定位点相对于图标左上角的偏移值
	    infoWindowAnchor: new BMap.Size(10, 0)		//信息窗口开启位置相对于图标左上角的偏移值
	});
	for(var i=0;i<5;i++){
		var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例
	 	   icon: icon
		});
		//循环添加标注点击事件后显示出来的文本信息框的信息 (为了使文本框信息不重复) 需要用到闭包,否则只会显示最后一个数据
		(function(){
			var index = i;
			mkr.addEventListener("click", function(){
					this.openInfoWindow(new BMap.InfoWindow("闭包二" + index, {width: 200,height: 0,title: "闭包一" + index,enableMessage: false}));
			}); //在图标实例上添加鼠标点击事件
		})();
		map.addOverlay(mkr);		//将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次 
	}

 map = new BMap.Map("allmap");                        // 创建Map实例
	var point = new BMap.Point(120.170507,30.276462);  //以指定的经度和纬度创建一个地理点坐标,(创建坐标点)
	map.centerAndZoom(point, 11);     // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
	map.centerAndZoom(point, 11);		//对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
	

	//用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
	var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), {
	    anchor: new BMap.Size(10, 30),				//图标的定位点相对于图标左上角的偏移值
	    infoWindowAnchor: new BMap.Size(10, 0)		//信息窗口开启位置相对于图标左上角的偏移值
	});
	for(var i=0;i<5;i++){
		var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例
	 	   icon: icon
		});
		//循环添加标注点击事件后显示出来的文本信息框的信息 (为了使文本框信息不重复) 需要用到闭包,否则只会显示最后一个数据
		(function(){
			var index = i;
			mkr.addEventListener("click", function(){
					this.openInfoWindow(new BMap.InfoWindow("闭包二" + index, {width: 200,height: 0,title: "闭包一" + index,enableMessage: false}));
			}); //在图标实例上添加鼠标点击事件
		})();
		map.addOverlay(mkr);		//将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次 
	}