您的位置：首页 > 其它

百度地图使用指南

2016-05-06 13:37 387 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航