你的位置:首页 > Java教程

[Java教程]百度地图使用指南


全部学习资源下载: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>