码迷,mamicode.com
首页 > Windows程序 > 详细

h5-23-百度地图api

时间:2017-08-03 11:22:35      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:针对   margin   文字   模拟   size   级别   .com   scale   apc   

<!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

标签:针对   margin   文字   模拟   size   级别   .com   scale   apc   

原文地址:http://www.cnblogs.com/1020182600HENG/p/7278352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!