0
点赞
收藏
分享

微信扫一扫

百度地图 JavaScript API GL

醉倾城1 2022-04-05 阅读 56
javascript

文章目录

一、引入

  • 首先获取秘钥
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) // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

    var marker = new BMapGL.Marker(point) // 创建标注
    var lineArr = [];
    var last = null;
    map.addOverlay(marker) // 将标注添加到地图中
    map.addEventListener('click', e=> {
      last?map.removeOverlay(last):'';
      var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
      lineArr.push(p);//单机获取标注点
      var m = new BMapGL.Marker(p);
      last = m;
      map.addOverlay(m);
    })
    map.addEventListener("dblclick",()=>{ //双击绘制线面
      map.removeOverlay(last)
      var polyline = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})  //绘制线
      // var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"}) //绘制面
	   map.addOverlay(polyline); //绘制线
      // map.addOverlay(polygon); //绘制面
    })
    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>

绘制线效果：
在这里插入图片描述
绘制面效果：
在这里插入图片描述

四、标注信息

<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) // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

    var marker = new BMapGL.Marker(point) // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中

    var circle = new BMapGL.Circle(point, 1000, { //圆形
      strokeColor: 'blue',
      strokeWeight: 2,
      strokeOpacity: 0.5,
    })
    map.addOverlay(circle)
    var content = '中国'
    var label = new BMapGL.Label(content, {
      // 创建文本标注
      position: point, // 设置标注的地理位置
      offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
    })
    map.addOverlay(label) // 将标注添加到地图中

    var opts = {
      width: 250, // 信息窗口宽度
      height: 100, // 信息窗口高度
      title: 'Hello', // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow('World', opts) // 创建信息窗口对象
   

    marker.addEventListener("click", e=>{
      map.openInfoWindow(infoWindow, point) // 打开信息窗口    
    });

    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>

点击标注点效果：
在这里插入图片描述

五、位置检索

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个地图</title>

    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"
    ></script>
    <script src="./js/jquery-3.3.1.js"></script>  //注意：引入jQuery
    <style type="text/css">
      #container {
        height: 600px;
        width: 800px;
      }
      .tip {
        position: absolute;
        top: 35px;
        z-index: 10000;
        background-color: rgba(255, 255, 255, 0.7);
      }
      /*容器地图的宽高  */
    </style>
  </head>
  <body>
    <input type="text" id="inp" />
    <div class="tip"></div>
    <div id="container"></div>
    <!-- 存放地图的容器 -->
  </body>
  <script type="text/javascript">
    var map = new BMapGL.Map('container')
    // 创建地图实例
    var point = new BMapGL.Point(113.6648, 34.7835)
    // 创建点坐标
    map.centerAndZoom(point, 17)
    // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    //   创建一个本地搜索
    var local = new BMapGL.LocalSearch(map, {
      renderOptions: { map: map },
    })

    //当输入框inp 发送动作时候 发送ajax请求到百度 返回键
    $(() => {
      $('#inp').on('input', () => {
        //  输出文本框的的内容
        console.log($('#inp').val())
        $.ajax({
          url: `https://api.map.baidu.com/place/v2/suggestion?query=${$(
            '#inp',
          ).val()}&region=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,
          dataType: 'jsonp',
          success: function (res) {
            console.log(res.result)
            // 把res.result遍历成dom节点
            var str = ''
            res.result.forEach((item) => {
              str += `<p class="item">${item.name}</p>`
            })
            // 放入到tip div中
            $('.tip').html(str)
          },
        })
      })
      //   给tip添加单击事件 执行搜索
      //  用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制 确定具体按个元素被单击
      $('.tip').on('click', '.item', function () {
        // 获取当前单击item的文本并进行搜索
        local.search($(this).text())
        // 清空tip
        $('.tip').html('')
        // 清空输入框
        $('#inp').val('')
      })
    })
  </script>
</html>

效果：
输入景区检索结果
在这里插入图片描述

举报

相关推荐

百度地图GL javascript API 如何绘制流动箭头的线？

折线ci示例代码JavaScript前端开发

百度地图api应用,百度地图gis

控件搜索html系统/运维

百度地图API基础

自定义覆盖物百度JavaScript前端开发

百度地图API介绍

百度前端

百度地图JavaScript API v2.0创建地图

控件缩放htmlPython后端开发

如何使用百度地图API

百度javascriptreact.js前端html

如何调用百度地图API

数据库

调用百度地图API画线

json控件htmlHtml/CSS前端开发

百度离线地图开发API

离线地图html数据

Springboot 整合百度地图 API

百度jsonjavaspringSpark大数据
0 条评论