百度地图 JavaScript API GL

落雪飘风

已于 2022-04-05 22:37:18 修改

阅读量2.9k

点赞数 7

分类专栏：百度地图文章标签： javascript

于 2022-04-05 22:36:18 首次发布

本文链接：https://blog.csdn.net/wushangnb/article/details/123978368

版权

本文介绍了如何使用百度地图JavaScript API GL进行地图操作，包括引入API、添加控件、绘制点线面、创建标注信息及执行位置检索等功能。

摘要由CSDN通过智能技术生成

文章目录

一、引入
二、添加控件
三、绘制点线面
四、标注信息
五、位置检索

一、引入

首先获取秘钥

1.进入百度地图官网：https://lbsyun.baidu.com/
2.注册百度账号
3.首页 --> 控制台 -->  应用管理 --> 我的应用 --> 创建应用（前端应用类型：选择浏览器端） --> 得到ak

引用百度地图API文件:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

二、添加控件

 <body>
    <div id="container"></div>
  </body>
  <script>
    var map = new BMapGL.Map('container') // 创建地图实例
    var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
    // var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
    map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    map.setHeading(64.5) //设置地图旋转角度
    map.setTilt(73) //设置地图的倾斜角度

    // 禁止地图旋转和倾斜可以通过配置项进行设置
    var map = new BMapGL.Map('allmap', {
   
      enableRotate: false,
      enableTilt: false,
    })
    map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
    var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
  </script>

效果：
在这里插入图片描述

三、绘制点线面

 <body>
    <div id="container" style="width: 800px;height: 600px;"></div>
  </body>
  <script>
    var map = new BMapGL.Map('container') // 创建地图实例
    var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
    // var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
    map.centerAndZoom(point, 17) // 初始化地