devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

百度地图的使用方法，如何在Vue项目中使用百度地图_vue 百度地图

作者：从前慢现在也慢 | 2024-02-18 19:08:06

赞

踩

vue 百度地图

关于百度地图的解释

百度地图又称LBS：LocationBussinessServer，是基于定义位置的商业服务，现在常用的地图有百度地图和高德地图居多

官网入口

https://lbsyun.baidu.com/apiconsole/center#/home

使用百度地图的步骤

第一步：登陆注册，获取密钥AK（需要自行注册百度地图，实名认证后创建获得）
第二步：引入百度地图js

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

  • 1

第三步：创建地图的容器

<div id="container"></div>

  • 1

第四步：初始化地图

var map = new BMapGL.Map("container");

  • 1

第五步：创建一个地图中心点

var point = new BMapGL.Point(116.404, 39.915);

  • 1

第六步：设置中心点和滚轮缩放

map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);


  • 1
  • 2
  • 3

全部代码

<!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>Document</title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<!-- 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container");
    //准备一个中心点（经纬度）
    var point = new BMapGL.Point(116.404, 39.915);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
</script>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

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

丰富百度地图上的内容

添加地图控制器

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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

地图上绘制内容

点

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container">

    </div>
</body>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    // var point = new BMap.Point(113.665,34.784);
    var map = new BMapGL.Map("container");          // 创建地图实例 
    var point = new BMapGL.Point(113.665, 34.784);  // 创建点坐标 
    map.centerAndZoom(point, 15);
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
    //添加一个点
    var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);
    map.addEventListener("click", e => {
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        var m = new BMapGL.Marker(p);
        map.addOverlay(m);
        console.log(e);
    })
</script>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

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

线

<!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>Document</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<!-- 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container");
    //准备一个中心点（经纬度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //添加一个点
    var marker = new BMapGL.Marker(point);        // 创建标注
    //添加覆盖物   
    map.addOverlay(marker);                     // 将标注添加到地图中
    //存储多个点
    var line = [];
    var markers = [];

    //监听事件
    map.addEventListener("click", e => {
        //创建点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        //创建标记
        var m = new BMapGL.Marker(p);
        markers.push(m);
        //添加标记
        map.addOverlay(m);
        //存储点
        line.push(p)
        console.log(e);
    });
    map.addEventListener("dblclick", e => {
        //把第0个点放到最后边
        line.push(line[0]);
        //创建多边形
        var polyline = new BMapGL.Polyline(line, { strokeStyle: "dashed", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        //添加线
        map.addOverlay(polyline);
        //清空点的列表
        line = [];
        //清空点
        markers.forEach(item => map.removeOverlay(item));
        markers = [];
    })

</script>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

运行截图：（线的类型和颜色可以自己控制）
在这里插入图片描述

面

<!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>Document</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<!-- 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container");
    //准备一个中心点（经纬度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //添加一个点
    var marker = new BMapGL.Marker(point);        // 创建标注
    //添加覆盖物   
    map.addOverlay(marker);                     // 将标注添加到地图中
    //存储多个点
    var line = [];
    var markers = [];

    //监听事件
    map.addEventListener("click", e => {
        //创建点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        //创建标记
        var m = new BMapGL.Marker(p);
        markers.push(m);
        //添加标记
        map.addOverlay(m);
        //存储点
        line.push(p)
        console.log(e);
    });
    map.addEventListener("dblclick", e => {
        //把第0个点放到最后边
        line.push(line[0]);
        //创建多边形
        var polygone = new BMapGL.Polygon(line, { fillColor: "blue", strokeStyle: "dashed", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        //添加线
        map.addOverlay(polygone);
        //清空点的列表
        line = [];
        //清空点
        markers.forEach(item => map.removeOverlay(item));
        markers = [];
    })

</script>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

运行截图：（面的颜色可以自己控制）
在这里插入图片描述

绘制圆

//绘制圆圈
    var circle = new BMapGL.Circle(point, 2000, { strokeColor: "blue", });
    //添加圆圈
    map.addOverlay(circle);

  • 1
  • 2
  • 3
  • 4

运行截图：（颜色可以自己控制）
在这里插入图片描述

添加标注

//添加标注
    // var content = "label";
    var label = new BMapGL.Label("中国前端学习基地", {       // 创建文本标注
        position: point,                          // 设置标注的地理位置
        offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
    })
    map.addOverlay(label);                        // 将标注添加到地图中
    label.setStyle({
        fontSize: "32px",
        color: "red"
    })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

运行截图：
在这里插入图片描述

添加信息窗口

//信息窗口
    var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单，只有<strong>javascript,jquery</strong></p>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20210911%2Fbe6fde8058e8407c8a8f9c64e6391519.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669788564&t=84a66cf92e8a60210b4f39a33003c812" width="200">
    `, opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
    //map.getCenter()获取到地图的中心位置

    marker.addEventListener("click", e => {
        //单击显示
        map.openInfoWindow(infoWindow, map.getCenter());
    })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

运行截图：（这里添加了一个p标签和一张图片）
在这里插入图片描述

搜索

<!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>Document</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <input type="search" onchange="search(this)">
    <div id="container"></div>
</body>
<!-- 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container");
    //准备一个中心点（经纬度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //添加一个点
    var marker = new BMapGL.Marker(point);        // 创建标注
    //添加覆盖物   
    map.addOverlay(marker);                     // 将标注添加到地图中

    //创建一个本地搜索
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
    });
    function search(e) {
        local.search(e.value);
    }

</script>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

运行截图：（当在输入框输入内容，会搜索对应的关键字）
在这里插入图片描述

移除覆盖物

map.removeOverlay(覆盖物)

  • 1

地图的事件

map.addEventListener("click", e => {})
map.addEventListener("dblclick", e => {})


  • 1
  • 2
  • 3

注意：所有的覆盖物都可以添加事件

在Vue项目中使用百度地图

第一步：public/index.html引入
在这里插入图片描述
第二步：在组件中定义data

data() {
    return {
      map: null,//地图
      point: null,//中心点
      marker: null,//标记
      keyword: "",//关键字
      local: null,//搜索控件
    };
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

第三步：mounted初始化项目

mounted() {
    this.map = new window.BMapGL.Map(this.$refs.map);
    this.point = new window.BMapGL.Point(113.665, 34.784);
    this.map.centerAndZoom(this.point, 15);
    //鼠标滚轮缩放
    this.map.enableScrollWheelZoom(true);
    //添加一个点
    this.marker = new window.BMapGL.Marker(this.point);
    //添加覆盖物
    this.map.addOverlay(this.marker);
    this.local = new window.BMapGL.LocalSearch(this.map, {
      renderOptions: { map: this.map },
    });
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

这里需要注意：
为什么第三方api需要加window呢？
答：echarts还是BMapGL都是挂载到window上的，如果直接使用早当前的组件里面没有导入这个BMapGL会报错（效果也会有，js会向上查找），基本上第三方组件，都需要在mounted组件渲染完毕后在执行初始化（确保js已经加载完毕）

第四步：监听数据变化，更新地图

watch: {
    keyword: {
      handler() {
        if (this.keyword == "") {
          //如果为空就清除搜索
          this.local.clearResults();
          //缩放到中心点
          this.map.centerAndZoom(this.point, 15);
        } else {
          this.local.search(this.keyword);
        }
      },
    },
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

可以通过百度地图插件来使用

网址：https://dafrok.github.io/vue-baidu-map

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/109952
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号