入门百度地图 JavaScript API | 8月更文挑战

那些年丶ny
3,355 阅读2分钟

注册

先申请百度账号，创建地图应用生成 AK。百度地图平台

image.png

image.png

注意

  • 应用类型选择浏览器端。
  • 白名单输入*号，所有地址都可以访问。

载入地图

  • 在页面使用script标签引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
  1. v : 地图api版本。
  2. type : 添加type=webgl，使用3D地图类型。
  3. ak : 刚才创建应用的ak值。
  4. 百度地图 示例中心
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script type="text/javascript" src="./test/jquery.min.js"></script>

    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 100%;
      }
      .bmap {
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script>
  </head>

  <body>
    <!-- 百度地图-->
    <div id="bmap" class="bmap"></div>
    <script type="text/javascript">
      var map = new BMapGL.Map('bmap') // 创建Map实例
      map.centerAndZoom('上海市', 10) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    </script>
  </body>
</html>

image.png

  • 就这么简单，一个百度地图的开发环境搭建好了。
  • 当然也有使用vue、react。这时候就可以使用社区同学，对地图api封装后的框架。如 vue-baidu-map、rc-bmap 等。或者使用webpack的外部扩展(Externals)。
// 在配置中添加
module.exports = {
  //...
  externals: {
    BMapGL: 'BMapGL',
  },
};

// 在页面中就可以使用模块化方式引入
import BMapGL from 'BMapGL';

简单介绍

控件

就是在地图上层添加，对地图控制的组件。如放大、缩小、平移等。官方提供了很多定义好的控件，可以直接使用。当然我们也可以自定义控件（通过DOM事件触发函数，在函数中调用地图api）。

var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
map.addControl(scaleCtrl)
var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
map.addControl(zoomCtrl)
var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
map.addControl(cityCtrl)

image.png

  • 到了这里就要提一句。百度地图左下角的图标，其实就是个img。要隐藏他只要找到样式名设置隐藏就行。这里不直接对.anchorBL隐藏是因为其他控件也使用了这个样式名。
// 图标
.anchorBL img {
    display: none;
}
// 备案信息
.BMap_cpyCtrl.anchorBL span {
    display: none !important;
}

覆盖物

  • 简单理解就是在地图图层上层添加元素展示。在百度地图中覆盖物种类有很多，通过不同的覆盖物函数，在地图上添加不同的覆盖物如点、面、信息框等。后面会详细介绍下覆盖物。
  • 使用map.addOverlay()方法向地图添加覆盖物，使用map.removeOverlay()方法移除覆盖物。
// 创建位置点
var point = new BMapGL.Point(121.52, 31.0)
// 创建带高度的点
var marker3d = new BMapGL.Marker3D(point, 8000, {
size: 50,
shape: BMAP_SHAPE_CIRCLE,
fillColor: '#454399',
fillOpacity: 0.6
})
// 将点添加到地图上
map.addOverlay(marker3d)

image.png

事件处理

  • 百度地图API拥有一个自己的事件模型和DOM事件使用方式类式。
// 使用方式 监听点击事件
map.addEventListener('click', handleClick );

function handleClick(e) {
    // e参数会包含鼠标所对应的地理位置latlng
   alert('click!')
}
// 清除监听事件
map.removeEventListener('click', handleClick);
  • 部分事件截图 image.png

LBS服务

  • 百度地图对开发者提供的，围绕地理位置数据而展开的服务。
  • 根据地址转换到经纬度，根据经纬度返回经纬度的，自动规划出行路线，等。
  • 官方示例
avatar
文章
阅读
粉丝