百度地图使用指南

全部学习资源下载：http://pan.baidu.com/s/1eSGy3Qi

效果预览：http://wjf444128852.github.io/demo/baiduditu/index.html

html5里完全支持百度地图

使用步骤

1、 引入百度地图的JS

* 链接 - http://api.map.baidu.com/api?v=2.0&ak=秘钥
* 必须先申请应用秘钥 - XXXXXXX

2、在HTML页面中定义用于显示百度地图的容器(元素)

* 使用<div></div>元素

3. 创建百度地图的对象(Map)
* * 构造器 - BMap.Map(容器id)
* * 通过centerAndZoom()进行地图的初始化
* * 该方法是必要方法

4. 初始化百度地图
* Map地图对象
* * 方法 - centerAndZoom(center,zoom)
* * center参数 - 设置当前的中心点
* * 类型为Point,zoom参数必须设置
* * 类型为String,例如"北京",zoom参数可以省略
* * zoom参数 - 设置地图显示级别
* * PC端 - 3-19
* * 移动端 - 3-18

<!DOCTYPE html>
<html>
 <head>
  <title>使用百度地图位置定位</title>
  <meta charset="utf-8" />
  <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
  <style type="text/css">
          body, html,#allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:0;
            font-family:"微软雅黑";
          }
    </style>
 </head>
 <body>
  <div id="allmap"></div>
  <script>
    var map = new BMap.Map("allmap");
    map.centerAndZoom("上海",12);
    /*
     * 使用浏览器定义 - 得到当前位置的经度和纬度
     * Geolocation类
     * * 作用 - 返回用户当前的位置
     * * 问题 - 依靠浏览器来实现当前位置定位的功能
     * * 构造器 - Geolocation()
     * * 方法
     *   * getCurrentPosition(callback)方法
     *     * 作用 - 返回用户当前位置
     *     * 参数callback
     *       * 定位成功,该回调函数具有一个GeolocationResult参数
     * GeolocationResult类
     * * 作用 - 返回当前位置的经度和纬度
     * * 属性
     *   * point - 当前位置坐标值(经度和纬度)
     */
    /*
    var local = new BMap.Geolocation();
    local.getCurrentPosition(function(result){
        // result.point获取的坐标值 - 不准确
        console.log(result.point.lng);
        console.log(result.point.lat);
    });
    */
    /*
     * 使用地址解析方式 - 到当前位置的经度和纬度
     * Geocoder类
     * * 作用 - 用于获取用户的地址解析
     * * 构造器 - Geocoder()
     * * 方法
     *   * getPoint(address,callback,city)方法
     *     * 作用 - 对指定的地址进行解析
     *     * 参数
     *       * address - 设置解析的地址内容
     *       * callback - 回调函数
     *         * 地址定位成功,具有Point参数
     *       * city - 当前中心城市
     */
     // 创建比例尺控件对象
    var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
    // 将比例尺控件添加到百度地图中
    map.addControl(scale);
    // 
    /*
     * Control类 - 控件类
     * NavigationControl类 - 表示地图的平移缩放控件
     * * 构造器 - NavigationControl()
     * Map对象移除控件 - removeControl()
     */
    var nav = new BMap.NavigationControl();
    map.addControl(nav);
    // 设定目标提醒位置
    var geo = new BMap.Geocoder();
    geo.getPoint("上海市厦门路115号",function(point){
        /*
        console.log(point.lng);
        console.log(point.lat);
        */
        var marker = new BMap.Marker(point);
        map.centerAndZoom(point,17);
        map.addOverlay(marker);
        /*
         * 鼠标点击标注,打开信息窗口
         * InfoWindow类 - 信息窗口
         * * 构造器 - InfoWindow(addr,options)
         *   * addr - 设置的地址
         *   * options - 设置信息窗口的设置
         */
        var opts = {
            width : 200,
            height: 100,
            title : "捷达五金商城"
        }
        // 创建信息窗口对象
        var info = new BMap.InfoWindow("地址:厦门路115号.",opts);
        // 为标注绑定click事件
        marker.addEventListener("click",function(){
            // 打开信息窗口
            map.openInfoWindow(info,point);
        });
    },"上海市");
  </script>
 </body>
</html>

 

posted @ 2016-05-06 13:37  逗伴不是瓣  阅读(978)  评论(0)  编辑  收藏  举报