HTML5 DAY05:
* Geolocation(地理定位)
* 基本内容
* 地理定位 - 地球的经度和纬度的相交点
* 实现地理定位的方式
* GPS - 美国的,依靠卫星定位
* 北斗定位 - 纯国产,惯性定位技术和卫星定位
* 基站定位 - 移动运营商创建基站(提供信号源)
* 基于互联网 - IP地址(PC端和移动端)
* 目前很多浏览器都具有定位功能
* HTML5中地理定位
* 地理定位功能并不是属于HTML5专有内容
* HTML5的地理定位技术,由Google公司提供的
* Google Map产品
* 中国 - 国内不能使用Google公司所有服务和产品
* 百度地图和高德地图
* 百度地图
* 百度地图 - http://developer.baidu.com/map/
* 注册百度开发者账户
* http://developer.baidu.com/
* 条件 - 必须能连接互联网
* 目的 - 掌握如何使用百度地图
* JS库或百度地图
* 提供的API帮助文档
* 提供的Demo示例代码
* 学习目的
* 学习的百度地图的功能
* 百度地图的使用特点
* 如何使用百度地图
* 在HTML页面中
* 引入百度地图的JS
http://api.map.baidu.com/api?v=2.0&ak=秘钥
* 定义显示地图的容器
* 在javascript代码中
* 创建百度地图Map对象
var map = new BMap.Map(容器id);
* 进行地图的初始化
map.centerAndZoom();
* 百度地图的组件
* 核心类 - Map类
* 构造器 - BMap.Map(容器id);
* 方法
* centerAndZoom() - 初始化方法
* addControl() - 添加控件
* addOverlay() - 添加标注
* Control类 - 控件类
* ScaleControl类 - 表示地图的比例尺
* 构造器 - 创建比例尺对象
* NavigationControl类 - 表示移动缩放控件
* 构造器 - 创建移动缩放控件
* Overlay类 - 遮盖物类
* Marker类 - 表示地图的一个标注
* 构造器 - Marker(point)
* Point类 - 标注类
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <style type="text/css"> 7 body, html,#allmap { 8 width: 100%; 9 height: 100%; 10 overflow: hidden; 11 margin:0; 12 font-family:"微软雅黑"; 13 } 14 style> 15 16 <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">script> 17 <title>如何使用百度地图title> 18 head> 19 <body> 20 21 <div id="allmap"> 22 23 div> 24 body> 25 html> 26 <script> 27 //百度地图APU功能 28 /* 29 * 3.创建Map实例 30 * * 构造器 - BMap.Map(容器的id属性值)方法 31 */ 32 var map = new BMap.Map("allmap"); 33 //初始化地图，设置中心点坐标地图级别 34 map.centerAndZoom(new BMap.Point(116.404,39.915),11); 35 script>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02-使用百度地图嵌入页面title> 6 11 <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">script> 12 head> 13 <body> 14 18 <div id="allmap" style="width: 400px; height: 400px;">div> 19 <script type="text/javascript"> 20 /* 21 * 3. 使用百度地图的对象（Map） 22 * * 构造器 - BMap.Map(容器ID) 23 * * 通过centerAndZoom()进行地图的初始化 24 * * 该方法是必要的 25 */ 26 var map = new BMap.Map("allmap"); 27 28 /* 29 * 4. 初始化百度地图 30 * * Map地图对象 31 * * 方法 - centerAndZoom(center,zoom) 32 * * center参数 - 设置当前的中心点 33 * * 类型为Point,zoom参数必须设置 34 * * 类似为string，例如"北京"，zoom参数可以省略 35 * * zoom参数 - 设置地图显示级别 36 * * pc端 - 3-19 37 * * 移动端 - 3-18 38 */ 39 map.centerAndZoom("北京",12); 40 script> 41 body> 42 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03-使用百度地图的相关组件title> 6 <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">script> 7 head> 8 <body> 9 <div id="allmap" style="width: 800px; height: 600px;">div> 10 11 <script type="text/javascript"> 12 var map = new BMap.Map("allmap"); 13 map.centerAndZoom("北京",12); 14 /* 15 * 为百度地图添加控件 16 * control类 17 * ScaleControl类 - 表示比例尺控件 18 * 构造器 - ScaleControl() 19 * 方法 20 * setUnit() - 设置比例尺的单位 21 * getUnit() - 获取比例尺的单位 22 * 添加位置，默认为左下角 23 * 构造器参数SCaleControl Options类型 24 * anchor - 设置控件的停靠位置 25 * BMAP_ANCHOR_TOP_LEFT 26 * BMAP_ANCHOR_TOP_RIGHT 27 * BMAP_ANCHOR_BOTTOM_RIGHT 28 * BMAP_ANCHOR_BOOTOM_LEFT - 默认值 29 * 件将创建的控件添加到百度地图中 30 * 通过Mpa对象的addControl()方法 31 */ 32 // 创建比例尺控件对象 33 var scale = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); 34 // 将比例尺控件添加到百度地图中 35 map.addControl(scale); 36 /* 37 * Control类 - 控件 38 * NavigationControl类 - 表示地图的平移缩放控件 39 * 构造器 - MavigationControl() 40 * point - 标注的坐标值 41 * map对象添加遮盖物 42 * * addOverlay(marker) 43 * Point类 - 表示一个地理坐标值 44 * * 构造器 - Point(lng,lat) 45 * * lng - number类型，表示经度 46 * * lat - number类型， 表示纬度 47 * * 如何获取位置的经纬度 48 */ 49 50 // 获取地图坐标值 51 var point = new BMap.Point(116.404,39.915); 52 //创建地图标注 53 var marker = new BMap.Marker(point); 54 // 添加标注 55 map.addOverlay(marker); 56 57 script> 58 59 60 61 62 body> 63 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04-使用百度地图定位title> 6 <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">script> 7 head> 8 <body> 9 <div id="allmap" style="width: 800px; height: 600px;"> 10 11 div> 12 <script type="text/javascript"> 13 var map = new BMap.Map("allmap"); 14 map.centerAndZoom("北京",12); 15 /* 16 * 使用浏览器定义 - 得到当前位置的经度和纬度 17 * Geolocation类 18 * * 作用 - 返回用户当前的位置 19 * * 问题 - 依靠浏览器来实现当前位置定位的功能 20 * * 构造器 - Geolocation() 21 * * 方法 22 * * getCurrentPosition(callback)方法 23 * * 作用 - 返回用户当前位置 24 * * 参数callback 25 * * 定位成功,该回调函数具有一个GeolocationResult参数 26 * GeolocationResult类 27 * * 作用 - 返回当前位置的经度和纬度 28 * * 属性 29 * * point - 当前位置坐标值(经度和纬度) 30 */ 31 /* 32 var local = new BMap.Geolocation(); 33 local.getCurrentPosition(function(result){ 34 // result.point获取的坐标值 - 不准确 35 console.log(result.point.lng); 36 console.log(result.point.lat); 37 }); 38 */ 39 /* 40 * 使用地址解析方式 - 到当前位置的经度和纬度 41 * Geocoder类 42 * * 作用 - 用于获取用户的地址解析 43 * * 构造器 - Geocoder() 44 * * 方法 45 * * getPoint(address,callback,city)方法 46 * * 作用 - 对指定的地址进行解析 47 * * 参数 48 * * address - 设置解析的地址内容 49 * * callback - 回调函数 50 * * 地址定位成功,具有Point参数 51 * * city - 当前中心城市 52 */ 53 var geo = new BMap.Geocoder(); 54 geo.getPoint("北京市海淀区万寿西街2号",function(point){ 55 /* 56 console.log(point.lng); 57 console.log(point.lat); 58 */ 59 var marker = new BMap.Marker(point); 60 map.centerAndZoom(point,17); 61 map.addOverlay(marker); 62 /* 63 * 鼠标点击标注,打开信息窗口 64 * InfoWindow类 - 信息窗口 65 * * 构造器 - InfoWindow(addr,options) 66 * * addr - 设置的地址 67 * * options - 设置信息窗口的设置 68 */ 69 var opts = { 70 width : 200, 71 height: 100, 72 title : "达内Web前端培训" 73 } 74 // 创建信息窗口对象 75 var info = new BMap.InfoWindow("地址:文博大厦2层.",opts); 76 // 为标注绑定click事件 77 marker.addEventListener("click",function(){ 78 // 打开信息窗口 79 map.openInfoWindow(info,point); 80 }); 81 },"北京市"); 82 script> 83 body> 84 html>