百度地图API应用

2015/10/03 39854
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"Microsoft Yahei";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3bb801b79151585f9534ed9ed7ff280d"></script>
	<title>BaiduMap</title>
</head>
<body>
<div id="showbd" 
	style="position: absolute;
			margin-top:1px; 
			width: 800px; 
			height: 600px; 
			top: 10; 
			border: 1px solid gray;
			overflow:hidden;">
</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("showbd");
	map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	map.addControl(new BMap.NavigationControl());  //初始化地图控件              
	map.addControl(new BMap.ScaleControl());                   
	map.addControl(new BMap.OverviewMapControl());              
	var point=new BMap.Point(114.294672,30.555526);
	map.centerAndZoom(point, 11);//初始化地图中心点
	var marker = new BMap.Marker(point); //初始化地图标记
	
	var json_data = [[114.401,30.915],[114.402,30.915],[114.403,30.915]];
	var pointArray = new Array();
	for(var i=0;i<json_data.length;i++){
		var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
		map.addOverlay(marker);    //增加点
		var label = new BMap.Label("标注"+i,{offset:new BMap.Size(20,-10)});
		label.setStyle({  
         display:"none", 
    });
		marker.setLabel(label);
		pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
		marker.addEventListener("click",attribute);
		
		marker.addEventListener("mouseover", function(e){  
				var p = e.target.getLabel();
				p.setStyle({ display:"block"});					 
		}); 
		marker.addEventListener("mouseout", function(e){ 
		    var p = e.target.getLabel();
				p.setStyle({display:"none"}); 
		});			
	}
	//让所有点在视野范围内
	map.setViewport(pointArray);
	//获取覆盖物位置
	function attribute(e){
		var p = e.target;
		alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
	}	
</script>
代码片段
