首页 > 代码库 > h5-23-百度地图api

h5-23-百度地图api

2024-11-15 20:08:39   203人阅读

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,body {
				height: 100%;
			}
		
			#mapDiv {
				width: 100%;
				height: 100%;
			}			
		</style>
	</head>
	<body>
		<!--显示地区的div-->
		<div id="mapDiv">			
		</div>		
		
		<script src="http://api.map.baidu.com/api?v=2.0&ak=Q6aiD950lCsEWDWblF8T5BzQjxeUylCj"></script>
		<script>
			window.onload = function() {
				
				//经纬度
				var longitude = 121.51155629576095;
				var latitude = 38.86043635958201;
				
				//调用百度地图的API
				var map = new BMap.Map(‘mapDiv‘); //创建地图对象
				var point = new BMap.Point(longitude,latitude);//坐标点对象
				
				map.centerAndZoom(point,15) ;//设置坐标中心点和缩放级别
				
				var marker = new BMap.Marker(point); //创建标记点
				map.addOverlay(marker);//在地图上添加标记点
				
				var label = new BMap.Label(‘纠正之前的GPS坐标‘,{offset:new BMap.Size(20,-20)}); //创建文字标签
				marker.setLabel(label); //添加标记的文字标签
				
				//添加地图类型控件，默认在地图右上方
				map.addControl(new BMap.MapTypeControl());
				//地图平移缩放控件，PC端默认地图左上方，移动端提供缩放控件，默认在地图右下方
				map.addControl(new BMap.NavigationControl());
				//比例尺控件，默认在地图左下方，显示地图的比例关系
				map.addControl(new BMap.ScaleControl());
				//缩略地图控件，默认在地图右下方，是一个可折叠的缩略地图
				map.addControl(new BMap.OverviewMapControl());
				//定位控件，针对于移动端，默认在地图左下方
				map.addControl(new BMap.GeolocationControl());
				//开启滚轮缩放
				map.enableScrollWheelZoom(true);
				
				//转换gps坐标为百度坐标,延迟3000毫米不是必须，只是模拟网络网络延迟
				setTimeout(function() {
					
					var convertor = new BMap.Convertor(); //转换坐标类的对象
					var pointArr = []; //坐标数组
					pointArr.push(point); //加入一个坐标对象（可以加入多个坐标对象）
					convertor.translate(pointArr,1,5,translateCallback);//转换坐标					
					
				},3000);
				
				//转换完毕的回调函数，data就是转换后的数据
				function translateCallback(data) {
					
					if (data.status == 0) { //0为转换成功
						var marker = new BMap.Marker(data.points[0]); //创建标记点
						map.addOverlay(marker);//在地图上添加标记点
						var label = new BMap.Label(‘纠正之后的GPS坐标‘,{offset:new BMap.Size(20,-20)}); //创建文字标签
						marker.setLabel(label); //添加标记的文字标签
						map.setCenter(data.points[0]);//调整地图中心点
					}
				}
			}
		</script>		
	</body>
</html>

　　

h5-23-百度地图api


联系
我们