百度地图API应用

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

<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,[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>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

原文地址：https://www.jb51.cc/html/456940.html

相关推荐