引用百度地图完成基本开发及实用控件使用

首先了解百度地图开放平台,官网文档包含Web开发、Android开发、iOS开发、服务接口、开发者工具,介绍全面,需要深入学习的伙伴可以仔细查阅,本文主要讲解Web开发JavaScript API。

如何快速开始地图开发:

  1. 申请百度账号和ak
    点我申请
  2. 准备页面
  <!DOCTYPE html>
  1. 适应移动端页面展示
  -scale=1.0, user-scalable=no" /> 
  1. 设置容器样式
 
  1. 引用百度地图API文件
  < script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
  1. 创建地图容器元素
    地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。
  < div id="container">< /div>  
  1. 创建地图实例
    位于BMapGL命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
  var map = new BMapGL.Map("container");

注意:
1、在调用此构造函数时应确保容器元素已经添加到地图上;
2、命名空间 API GL版使用BMapGL作为命名空间,所有类均在该命名空间之下,比如:BMapGL.Map、BMapGL.Control、BMapGL.Overlay;

  1. 设置中心点坐标
    这里使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为帝都中心坐标)
  var point = new BMapGL.Point(116.404, 39.915);

注意:
在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标(WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法。

  1. 地图初始化,同时设置地图展示级别
    创建地图实例后,需要对其进行初始化,BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
  map.centerAndZoom(point, 15); 

至此,我们就快速创建了一张以帝都中心为中心的地图:
引用百度地图完成基本开发及实用控件使用_第1张图片
引用百度地图完成基本开发及实用控件使用_第2张图片
接下来介绍一些百度地图实用控件:

  1. 开启鼠标滚轮缩放
    地图的鼠标滚轮缩放默认是关闭的,需要配置开启。
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  1. 设置地图的旋转角度和倾斜角度
    地图可以自定义旋转角度和倾斜角角度
  map.setHeading(64.5);   //设置地图旋转角度
  map.setTilt(73);       //设置地图的倾斜角度
引用百度地图完成基本开发及实用控件使用_第3张图片
  1. 添加比例尺控件
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
引用百度地图完成基本开发及实用控件使用_第4张图片
  1. 添加地图放大、缩小控件
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺(放大、缩小)控件
  map.addControl(zoomCtrl);  
引用百度地图完成基本开发及实用控件使用_第5张图片
  1. 控件位置偏移
    除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。
    如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。
  var opts = {offset: new BMapGL.Size(495, 20)}
  map.addControl(new BMapGL.ScaleControl(opts));  
引用百度地图完成基本开发及实用控件使用_第6张图片

文章到这里就结束了,想了解更多百度地图开发功能可以查看百度地图开放平台~

你可能感兴趣的:(前端,javascript)