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