HTML5学习笔记（四）地图功能

我就是我 2022-04-17 00:53 417阅读 0赞

一、HTML5中地理定位

地理定位功能并不是属于HTML5专有内容

HTML5的地理定位技术,由Google公司提供的Google Map产品来实现地理定位技术

但是中国国内不能使用Google公司所有服务和产品，所以选择百度地图和高德地图

百度地图市场份额大，所以建议学习和使用百度地图

二、百度地图

百度地图开发网址 - [http://developer.baidu.com/map/][http_developer.baidu.com_map]

百度地图提供的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类 - 标注类

<!DOCTYPE html>
    <html>
     <head>
      <title>百度地图的相关组件</title>
      <meta charset="utf-8" />
                   
      <script src="http://api.map.baidu.com/api?v=2.0&ak=此处写自己的秘钥"></script>         
     </head>
    
     <body>
      <div id="allmap" style="width:800px;height:600px"></div>
      <script>
    	var map = new BMap.Map("allmap");
    	map.centerAndZoom("北京",12);
    	/*
    	 * 为百度地图添加控件
    	 * Control类
    	 * ScaleControl类 - 表示比例尺控件
    	 * * 构造器 - ScaleControl()
    	 * * 方法
    	 *   * setUnit() - 设置比例尺的单位
    	 *   * getUnit() - 获取比例尺的单位
    	 * * 添加位置,默认为左下角
    	 *   * 构造器的参数ScaleControlOptions类型
    	 *     * anchor - 设置控件的停靠位置
    	 *       * BMAP_ANCHOR_TOP_LEFT
    	 *       * BMAP_ANCHOR_TOP_RIGHT
    	 *       * BMAP_ANCHOR_BOTTOM_RIGHT
    	 *       * BMAP_ANCHOR_BOTTOM_LEFT - 默认值
    	 * 将创建的控件添加到百度地图中
    	 * * 通过Map对象的addControl()方法
    	 */
    	// 创建比例尺控件对象
    	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);
    	/*
    	 * Overlay类 - 地图的遮盖物
    	 * Marker类 - 表示地图上一个图像标注
    	 * * 构造器 - Marker(point)
    	 *   * point - 标注的坐标值
    	 * Map对象添加遮盖物
    	 * * addOverlay(marker)
    	 * Point类 - 表示一个地理坐标点
    	 * * 构造器 - Point(lng,lat)
    	 *   * lng - number类型,表示经度
    	 *   * lat - number类型,表示纬度
    	 * * 如何获取位置的经度和纬度值?
    	 */
    	var point = new BMap.Point(116.404, 39.915);
    	// 创建地图标注
    	var marker = new BMap.Marker(point);
    	// 添加标注
    	map.addOverlay(marker);
      </script>
     </body>
    </html>

[http_developer.baidu.com_map]: http://developer.baidu.com/map/