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

·  阅读 726

注册

先申请百度账号,创建地图应用生成 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-maprc-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服务

  • 百度地图对开发者提供的,围绕地理位置数据而展开的服务。
  • 根据地址转换到经纬度,根据经纬度返回经纬度的,自动规划出行路线,等。
  • 官方示例
分类:
前端
分类:
前端