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

最新推荐文章于 2025-03-19 10:03:44 发布
最新推荐文章于 2025-03-19 10:03:44 发布
阅读量5.2k 收藏 17
点赞数 3
文章标签： vue.js 百度 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wzy199982/article/details/127624358
版权
本文详细介绍了如何在Vue项目中使用百度地图，包括注册获取密钥、地图初始化、添加控制器、绘制点线面、创建标注和信息窗口、搜索功能及事件处理。并提供在Vue组件中引入和更新地图的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于百度地图的解释

百度地图又称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>

第三步：创建地图的容器

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

第四步：初始化地图

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

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

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

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

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

全部代码

<!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>

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

丰富百度地图上的内容

添加地图控制器

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

地图上绘制内容

点

<!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>

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

线

<!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>

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

面

<!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>

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

绘制圆

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

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

添加标注

//添加标注
    // 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"
    })

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

添加信息窗口

//信息窗口
    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());
    })

运行截图：（这里添加了一个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>

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

移除覆盖物

map.removeOverlay(覆盖物)

地图的事件

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

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

在Vue项目中使用百度地图

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

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

第三步：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 },
    });
  },

这里需要注意：
为什么第三方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);
        }
      },
    },
  },

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

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

·歪腻·
关注
Vue使用百度地图
m0_51431448的博客
04-11 1万+
百度地图开放平台https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 javaScript APIhttps://lbs.baidu.com/index.php?title=jspopularGL 百度地图实例https://lbsyun.baidu.com/index.php?title=open/jsdemo Vue Baidu Map文档https://dafrok.github.io/vue-baidu-map/#/z...
vue使用百度地图（vue-baidu-map）
王等等csdn的博客
08-29 7493
vue使用百度地图，vue-baidu-map
vue中使用百度地图
swoly2894265391的博客
11-28 3102
/enableMapClick:false 表示禁止地图内景点信息点击// 设置地图允许的最大最小级别// 开启鼠标滚轮缩放// 设置中心点坐标和地图级别// 创建自定义标记 参数:自定义图片路径 大小 偏移量)// 根据坐标批量生成自定义图标点// 创建点// 创建标注// 将标注添加到地图中// 给标记点添加点击事件执行想进行的操作(经个人测试在此处注册点击事件效果最佳,该有的数据项都可以获取)})})},// 创建一个新图标)
vue项目引入百度地图并使用热力图
最新发布
m0_73845058的博客
03-19 204
首先需要先导入百度地图。
vue之百度地图的使用（一）
only_zing的博客
08-02 3614
vue中引用百度地图、使用百度地图搜索框以及在地图手动选取位置。
vue项目中使用百度地图（一）
sw_小七奥特曼的博客
08-23 3255
vue+百度地图的基础使用。
vue项目中使用百度地图的方法
08-27
Vue 项目中使用百度地图的方法主要介绍了在 Vue 项目中使用百度地图的方法。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。 一、在百度地图申请密钥 在使用百度地图之前...
详解vue在项目中使用百度地图
10-17
以上即为在Vue项目中使用百度地图的详细步骤和一些重要的技术点。通过在`index.html`中引入地图链接、在Vue组件中定义地图容器和初始化地图实例，可以在Vue项目中实现百度地图的基本功能。学习和使用这些知识点，...
详解vue项目中调用百度地图API使用方法
10-17
本文将详细讲解如何在Vue项目中调用百度地图API，包括申请密钥、引入API、配置Webpack、创建地图对象及在组件中使用等步骤。 **步骤一：申请百度地图密钥（AK）** 首先，你需要访问百度地图API的官方链接地址：...
2种在vue项目中使用百度地图的简单方法
10-17
本文将介绍两种在Vue项目中集成百度地图的简单方法，这两种方法都易于实现，并且对于开发者来说非常实用。 首先，我们要知道为什么要将百度地图集成到Vue项目中。百度地图提供的地图服务可以为用户提供精准的地理...
在Vue中使用百度地图
weixin_46738453的博客
09-12 797
vue 百度地图api
vue项目中使用百度地图
linfeng_meng的博客
10-11 1275
vue中使用百度地图
Vue中使用百度地图
weixin_44309299的博客
08-20 2613
新建一个百度地图的实例
VUE 中引入百度地图(vue-Baidu-Map)
weixin_30852451的博客
07-04 1584
1、安装 $ npm install vue-baidu-map --save 2、全局注册，在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你申请的key' }) 3、界面 <template> <baidu-m...
百度地图在vue中的使用
weixin_44284981的博客
06-22 3090
在vue文件中 在style中给map设置高度，否则地图不会显示 说明 baidu-map的常用属性 min-zoom：最小层级 center：地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915} zoom: 缩放的等级 scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false 事件 ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值 zoomend：地图更改缩放级
【Vue】vue项目中使用百度地图教程
m0_61049675的博客
05-14 4428
由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。在你的Vue项目中运行并测试地图的显示和功能。在你的Vue项目的public/index.html或者相应的HTML模板文件中，通过。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。元素作为地图的容器，并给它一个唯一的ID。是地图的中心点坐标，15是地图的缩放级别。
Vue项目中实现百度地图离线资源的应用指南
要实现Vue中使用百度地图的离线功能，首先需要了解如何在Vue项目中合理引入和使用百度地图资源。以下是一些关键步骤： ##### a. 引入百度地图脚本 在Vue项目中，通过script标签的方式引入百度地图的JavaScript文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值