HTML5地理定位-百度地图的使用方法(附案例)

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>

 

转载于:https://www.cnblogs.com/w190/p/7376040.html

你可能感兴趣的:(HTML5地理定位-百度地图的使用方法(附案例))