随笔- 45 文章- 9 评论- 0 阅读- 52724

vue2中引入百度地图方式汇总：2D/3D都可以通过两种方式实现：1添加地图容器直接在JS代码中使用百度地图API或者 2使用Vue Baidu Map组件 3.引入3D百度地图-WebGL类型直接在JS代码中使用百度地图API 4引入3D百度地图-WebGL 类型使用 el-bmap组件

1	`npm install vue-bmap-gl --save`

https://dafrok.github.io/vue-baidu-map/#/

https://www.npmjs.com/package/vue-baidu-map

https://lbs.baidu.com/index.php?title=open/demos

0.前缀准备工作：申请ak ，安装 npm install vue-baidu-map

进入网址百度地图开放平台： https://lbsyun.baidu.com/apiconsole/center#/home 在控制台新建应用复制访问应用的ak

前期准备:申请ak 前往百度地图开发平台注册百度账号,申请密钥【https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey】

引入百度地图方式汇总：

在Vue中使用百度地图，引入百度地图方式汇总：可以通过两种方式实现：添加地图容器直接在JS代码中使用百度地图API，或者，使用Vue Baidu Map组件。

方式一：添加地图容器直接在JS代码中使用百度地图API：步骤如下

百度地图2d vue-baidu-map，

1.1在需要的地方，例如在在public/index.html中引入百度地图的JS API库：

1	`<script type="text/javascript"` `src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图API密钥"></script>`

1.2在Vue组件的模板中添加地图容器<div ref="mapContainer" class="map"></div> ：

1.3然后在Vue组件的mounted生命周期钩子中初始化百度地图： new BMapGL.Map(this.$refs.mapContainer)

参考官网：

https://lbsyun.baidu.com/jsdemo.htm#aCreateMap

关键代码：

new BMap.Map

script.src = `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=onBMapCallback`; // 【type=webgl】

举例如下：

<template>
   <div    id="map-container" class="map"   ref="container"  style="width: 100%; height: 100%"  ></div>
</template>
 
<script>
const mapvgl = require('mapvgl')
const  loadBMap = function loadBMap( akValue) {
  return new Promise(function (resolve, reject) {
    if (typeof window.BMapGL !== "undefined") {
      resolve(window.BMapGL);
      return true;
    }
 
    // 百度地图异步加载回调处理，不使用加载的script不会执行
    window.onBMapCallback = function () {
      console.log("百度地图脚本初始化成功...");
      resolve(window.BMapGL);
    };
 
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=${akValue}&callback=onBMapCallback`;
    // 启用 https 配置，通过 s=1 参数实现
    // 启用 callback 参数，异步加载必须使用此参数才可以生效
    script.onerror = reject;
    document.documentElement.appendChild(script);
  })
};
export default {
 name: 'sub-map002',
 data: () => {
   return {
    map: {},
 
   };
 },
 computed: {
 
 },
 mounted() {
  this.$nextTick(() => {
        var  ak='XXXXi3WesOqMGc5Bqf1OK5uYBGYf7P1x'    // 申请的ak 前往百度地图开发平台注册百度账号,申请密钥
        loadBMap( ak ).then((BMapGL) => {
        console.log("BMapGL", BMapGL);
        const _this = this;
        console.log("BMapGL", BMapGL);
        this.BMapGL = BMapGL;
        let map = new BMapGL.Map(this.$refs.container);
        map.centerAndZoom(new BMapGL.Point(102.698108,25.048039), 11);
         map.enableScrollWheelZoom(true);
        map.addeventlistener('tilesloaded', function () {
            alert('地图加载完成！');
        });
 
        // map.setMapStyleV2({
        //   stylejson: require("./custom_map_config.json"),
        // });           this.map =map
 
      })
 
     })
 
 },
 created() {},
};
</script>
 
<style lang="less">
html,body,#map-container {
  margin: 0;  padding: 0;
 width: 100% ;
 height: 100%;
 position: relative; 
  
}
</style>

行政区域

var dist = new BMapGL.DistrictLayer({ name: '(北京,天津)', fillColor: '#5e8bff', fillOpacity: 1 });

map.addDistrictLayer(dist);

方式二 vue2百度地图使用 _使用Vue Baidu Map组件：步骤如下

百度地图2d vue-baidu-map，

2.1首先安装Vue Baidu Map： npm install vue-baidu-map --save

2.2然后在Vue项目中引入并使用：

// main.js 或者要使用地图的地方引入
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
  
Vue.use(BaiduMap, {
ak: '你的百度地图ak' // 这里填写你的百度地图ak
})

2.3接着在Vue组件中使用<baidu-map>标签：

<template>
  <baidu-map class="map" @ready="handler">
  </baidu-map>
</template>
  
<script>
export default {
  methods: {
    handler({ BMap, map }) {
      // 这里可以操作百度地图实例
    }
  }
}
</script>
  
<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

关键代码：

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, { ak: '你的百度地图ak' // 这里填写你的百度地图ak });

handler

举例如下：

<template>
    <div class="container1">
        <h1> 插件百度地图vue-baidu-map:vue2使用（该插件只在vue2项目中可使用,在vue3项目中使用会报错） </h1>
        <p> 官方
            https://dafrok.github.io/vue-baidu-map/#/zh/start/installation <br />
            密钥
            http://lbsyun.baidu.com/apiconsole/key<br />
            生成器
            http://api.map.baidu.com/lbsapi/creatmap/index.html<br /> 
 
        示例：
        npm install vue-baidu-map --save
 
        <div>
            <!-- ak是密钥，仅局部注册组件时声明         <baidu-map  @ready="handler"  :center="{ lng: 116.404, lat:  39.076321 }" :scroll-wheel-zoom="true" :zoom="12" class="bm-view"  ak="oukWFWRKCGktlhX25uFBpEt0nV4iayz1"> -->
            <baidu-map @ready="handler" :center="centerLagLat" :scroll-wheel-zoom="true" :zoom="12" class="bm-view">
                <!--跳动标记-->
                <bm-marker :position="centerLagLat" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
                <bm-marker :position="{ lng: 116.404, lat: 39.07615 }" :dragging="true">
                    <bm-label content="我爱北京天安门" :labelStyle="{ color: 'red', fontSize: '24px' }"
                        :offset="{ width: -35, height: 30 }" />
                </bm-marker>
 
                <!--比例尺控件左上角-->
                <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
                <!--缩放控件右下角-->
                <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
 
            </baidu-map>
        </div>
    </div>
</template>
    
 
<script>
import Vue from "vue";
// 全局注册
// 全局注册将一次性引入百度地图组件库的所有组件。 
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'oukWFWRKCGktlhX25uFBpEt0nV4iayz1',  //个人手机号私人使用-July_zhengfj  oukWFWRKCGktlhX25uFBpEt0nV4iayz1
})
export default {
    name: 'BaiduMapContainer',
    components: {
    },
    data() {
        return {
            centerLagLat: { lng: 116.404, lat: 39.076321 },
            show: false,
        }
    },
    methods: {
        handler({ BMap, map }) { 
            console.log(BMap  ) 
            map.setMapStyle({style:'dark'}); //默认：极简风格地图(style:'googlelite')，黑夜风格地图代码:map.setMapStyle({style:'dark'}); 模板页可以查看 http://lbsyun.baidu.com/custom/list.htm 
            this.mapOBJ = map;
            // 去这个位置编辑http://lbsyun.baidu.com/apiconsole/custommap个性化地图 
            // this.map.setMapStyle({ styleJson: custom_map_config });
 
        }
    },
    props: {},
}
</script>
   
   
<style scoped>
.bm-view {
    width: 100%;
    height: 300px;
}
</style>

或者也可以改为： import BMap from 'vue-baidu-map/components/map/Map' <BMap ak="":center="center"class="map":scroll-wheel-zoom="true":zoom="zoom"@ready="handler"/> handler({ BMap, map }) { // 百度地图容器全局化 this.map = map // 百度地图构造函数全局化 mapConstructor = BMap },

举例2

备注

一.低版本的引用-安装vue-baidu-map

安装+ main.js全局引入 + 初始化地图使用--全部代码

 Yarn add vue-baidu-map --save

import BaiduMap from 'vue-baidu-map'; 
Vue.use(BaiduMap, {
  ak: 'XXXXXXXXXXqMGc5Bqf1OK5uYBGYf7XXX',
});

  
<template>
  <div   class="sub-map002"> 
 <baidu-map class="bm-view" :center="centerLagLat" :zoom="14" :scroll-wheel-zoom="true" ></baidu-map>
</div>
</template>

<script>  
export default {
 name: 'sub-map002', 
 data: () => {
   return {
      centerLagLat: {lng: 119, lat:29}, 
     
   };
 }, 
 computed: {
   
 }, 
 mounted() {  
 },
 created() {},
};
</script>

<style lang="less">
html,body,.sub-map002 {
  margin: 0;  padding: 0;
 width: 100% ;
 height: 100%;
 position: relative;
 
.bm-view {
 width: 100%;
 height: 100%;
 position: relative;
}
}
</style>

运行效果截图

地图添加标记--截取部分代码

 <div   class="sub-map002">   <baidu-map class="bm-view" :center="map.center" :zoom="map.zoom" :scroll-wheel-zoom="map.scroll-wheel-zoom" >
     <bml-marker-clusterer  :averageCenter="true">
        <bm-marker v-for="(marker,index) of marker1" :key="index + 'marker2'" :icon="{url: icon, size: {width: 128, height: 128}}" :position="{lng: marker.lng, lat: marker.lat} " >
          <bm-label :content="`区域设备总数:`+marker. count" :zIndex="9999" :labelStyle="{color: '#fff', fontSize : '16px',borderRadius:'6px',borderColor:'#0c75f5',backgroundColor:'#0c75f5',padding:'4px 7px'}" :offset="{width: 0, height: -6}"/>
        </bm-marker>
      </bml-marker-clusterer>
  </baidu-map>
</div>
import icon from "./assets/local.png";
<script> 
export default {
 name: 'sub-map002',
 data: () => {
   return {
     icon,
      map: {
        center: {lng: 109, lat:29},
        zoom: 13,
        dragging: true, 'scroll-wheel-zoom': true,
      },
       marker1:[  {lng: 109, lat:29, count:1229},], 
 
   };
 },
 computed: {
    
 },
 mounted() { 
 },
 created() {},
};
</script>

　　运行效果截图

自定义样式 @ready="handler"

<baidu-map ref="bmap"  class="bm-view" :center="map.center" :zoom="map.zoom"  @ready="handler">
      </baidu-map>
  
  methods: {
  handler ({BMap, map}) { 
       let goCenter = {
        lng: map.getCenter().lng,
        lat: map.getCenter().lat
       }  
 
       map.setMapStyle({  style : "midnight" }  );  
        // map.setMapStyle({    styleJson:   [[
        //   {
        //     'featureType': 'all',
        //     'elementType': 'geometry',
        //     'stylers': {
        //       'color': '#53F1F0'
        //     }
        //   },
        //   {
        //     'featureType': 'building',
        //     'elementType': 'geometry',
        //     'stylers': {
        //       'color': '#53F1F0'
        //     }
        //   }]  });  
        //  map.setMapStyle({ styleJson: this.mapStyle.styleJson }); 
     },
    },

自定义样式 @ready="handler" // 初始化百度地图

handler({ BMap, map }) {
 
this.map = map;
this.map.setMapStyle({ style: this.data.style || "googlelite" }); //默认：精简风格(googlelite)，模板页可以查看http://lbsyun.baidu.com/custom/list.htm
 
// 去这个位置编辑http://lbsyun.baidu.com/apiconsole/custommap个性化地图
 
// this.map.setMapStyle({ styleJson: custom_map_config });
 
}

方式三：

引入3D百度地图-WebGL类型直接在JS代码中使用百度地图API

type=WebGL: BMapGL 【vue-bmap-gl】直接在JS代码中使用百度地图API

需求；

为了使用百度地图的3D控件及旋转地图功能，看看WebGL 【vue-bmap-gl】

百度地图3d vue-bmap-gl --save

步骤

3.1安装 vue-bmap-gl --save：

目前只支持vue2，安装依赖

1	`npm install vue-bmap-gl --save`

（http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx）

3.2 在Vue文件中导入并注册 & 引入

import VueBMap from 'vue-bmap-gl'
import 'vue-bmap-gl/dist/style.css'
 
Vue.use(VueBMap)
VueBMap.initBMapApiLoader({
  // 百度的key
  ak: 'T9XgL5DpTmOQvL0SbN362KIzYpR52LYU', // 用自己的百度地图ak
  // 百度 sdk 版本，默认为 1.0
  v: '1.0'
})

　　3.3

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

import VueBMap from 'vue-bmap-gl';

var BMapGL = VueBMap.BMapGL

this.map = new BMapGL.Map('container', {}）// 创建地图实例

举例：

<template>
  <div>
    <div id="container" /> 
  </div>
</template>
<script>
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl'

export default {
  data() {
    return {
      map: null,
      centerPoint: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      mapType: 'BMAP_EARTH_MAP'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    small() {
      this.map.zoomOut()
    },
    big() {
      this.map.zoomIn()
    },
    NavigationControl3D() {
      // eslint-disable-next-line no-undef
      var navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件
      this.map.addControl(navi3DCtrl)
    },
    LocationControl() {
      // 创建定位控件
      // eslint-disable-next-line no-undef
      var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        // anchor: 'BMAP_ANCHOR_TOP_RIGHT',
        // 控件基于停靠位置的偏移量（可选）
        // eslint-disable-next-line no-undef
        // offset: new BMapGL.Size(20, 20)
      })
      // 将控件添加到地图上
      this.map.addControl(locationControl)

      // 添加定位事件
      locationControl.addEventListener('locationSuccess', function(e) {
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        alert('当前定位地址为：' + address)
      })
      locationControl.addEventListener('locationError', function(e) {
        alert(e.message)
      })
    },
    init() {
      lazyBMapApiLoaderInstance.load().then(() => {
        // eslint-disable-next-line no-undef
        const GL = 

        this.map = new GL.Map('container', {
          minZoom: 5,
          maxZoom: 20
        }) // 创建Map实例
        this.map.centerAndZoom(new GL.Point(this.centerPoint.lng, this.centerPoint.lat), this.zoom)
        this.map.enableScrollWheelZoom(true)
        this.map.setMapType(this.mapType)

        this.NavigationControl3D()
        this.LocationControl()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
}
.zlp-control {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
}
</style>

方式四：引入3D百度地图-WebGL 类型使用 el-bmap组件

type=WebGL: BMapGL 【vue-bmap-gl】使用 el-bmap组件

需求；
为了使用百度地图的3D控件及旋转地图功能，看看WebGL 【vue-bmap-gl】

百度地图3d vue-bmap-gl --save

步骤

4.1安装 vue-bmap-gl --save：

目前只支持vue2，安装依赖

1	`npm install vue-bmap-gl --save`

（http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx）

4.2在Vue文件中导入并注册VueBMap组件：

// 导入VueBMap组件
import VueBMap from 'vue-bmap-gl';
  
// 设置API密钥，必须是已在百度地图开放平台申请的密钥
VueBMap.initBMapApiLoader({
  ak: '你的百度地图API密钥'
});
  
// 在Vue组件中注册VueBMap
export default {
  components: {
    'el-bmap': VueBMap.BMapGL
  },
  // 其他组件选项...
}

4.3在组件模板中使用el-bmap组件：

<template>
  <div class="map-container">
    <el-bmap></el-bmap>
  </div>
</template>
  
<style>
.map-container {
  height: 500px; /* 设置地图容器的高度 */
}
</style>

注意：确保你已经在百度地图开放平台申请了API密钥，并且该密钥已经设置在VueBMap.initBMapApiLoader中。这样就可以在Vue组件中嵌入百度地图，并使用el-bmap组件进行地图的相关操作。

vue2-使用百度地图vue-bmap-gl 参考

1	`https://docs.guyixi.cn/vue-bmap-gl/#/zh-cn/base/bmap<br><br>https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey`

https://map.heifahaizei.com/doc/begin/use.html

<template>
  <div id="app">
    <h3 class="title">{{ msg }}</h3>
    <div class="bmap-wrapper">
      <el-bmap class="bmap-box" :center="centerLagLat" :zoom="11" :vid="'bmap-vue'"></el-bmap>
    </div>
  </div>
</template>
 

<script>

import Vue from 'vue';
import VueBMap from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl';
let bmapManager = new VueBMap.BMapManager();
Vue.use(VueBMap);
VueBMap.initBMapApiLoader({
  ak: 'XXXXXXXesOqMGc5Bqf1OK5uYBXXXXXXx', 
  // 默认百度 sdk 版本为 1.0
  v: '1.0',

}); export default { name: 'sub-map002', data: () => { return { msg: 'hello,vue-bmap！', centerLagLat:[102.697621,29.040], }; }, computed: { }, mounted() { }, created() {}, }; </script> <style lang="less" scoped> html,body,#app { width: 100%; height: 100%; background: rgba(255, 255, 255, 0); .bmap-wrapper { width: 100%; height: 500px; } } </style>

运行效果截图

<el-bmap ref="map" vid="bmapDemo" :center=" [102.6976218355306, 25.040793231655,]" :bmap-manager="bmapManager"

:min-zoom="10" :max-zoom="22" :zoom="zoom" :events="map_events" :map-style-v2="darkStyle" >

data: function() {
        return {
          bmapManager, 
          map: null,
          events: {
            init: (o) => {
              this.map = o;
              console.log(o.getCenter())
              console.log(this.$refs.map.$$getInstance())
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              alert('map clicked');
            }
          },
        };
      },

其他方式： BMapGL/MapVGL/BMapGLLib

vue2-使用百度地图BMapGL new BMapGL.Map/ MapVGL

https://mapv.baidu.com/gl/docs/index.html

https://docs.guyixi.cn/vue-mapvgl/#/zh-cn/introduction/install

https://gitee.com/guyangyang/vue-mapvgl/

vue-mapvgl是一些图层库，是依附于vue-bmap-gl的，需要同时安装vue-bmap-gl

https://mapv.baidu.com/gl/examples/editor.html#point-china.html

yarn add mapvgl -S

posted @ 2023-09-13 10:49 July_Zheng 阅读(2787) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 百度地图【vue-baidu-map-3x】-支持vue3/vue2

· Vue2.x项目使用MAPBOX地图

· Vue2使用百度地图——vue-baidu-map

· vue使用百度地图vue-bmap-gl

· Vue2+Vue-baidu-map 的使用

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App

公告

昵称： July_Zheng
园龄： 9年9个月
粉丝： 3
关注： 11

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

文章分类

software(3)

常想一二

路漫漫其修远兮吾将上下而求索

0.前缀准备工作：申请ak ，安装 npm install vue-baidu-map

进入网址百度地图开放平台： https://lbsyun.baidu.com/apiconsole/center#/home 在控制台新建应用复制访问应用的ak

前期准备:申请ak 前往百度地图开发平台注册百度账号,申请密钥【https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey】

方式一：添加地图容器直接在JS代码中使用百度地图API：步骤如下

举例2

备注

地图添加标记--截取部分代码

方式三：

引入3D百度地图-WebGL类型直接在JS代码中使用百度地图API

type=WebGL: BMapGL 【vue-bmap-gl】直接在JS代码中使用百度地图API

方式四：引入3D百度地图-WebGL 类型使用 el-bmap组件

type=WebGL: BMapGL 【vue-bmap-gl】使用 el-bmap组件

vue2-使用百度地图vue-bmap-gl 参考

其他方式： BMapGL/MapVGL/BMapGLLib

vue2-使用百度地图BMapGL new BMapGL.Map/ MapVGL

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

文章分类

阅读排行榜

推荐排行榜

常想一二

路漫漫其修远兮 吾将上下而求索

0.前缀准备工作：申请ak ， 安装 npm install vue-baidu-map

进入网址百度地图开放平台 ： https://lbsyun.baidu.com/apiconsole/center#/home 在控制台新建应用 复制访问应用的ak

前期准备:申请ak 前往百度地图开发平台注册百度账号,申请密钥 【https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey】

方式一：添加地图容器直接在JS代码中使用百度地图API：步骤如下

举例2

备注

地图添加标记--截取部分代码

方式三：

引入3D百度地图-WebGL类型 直接在JS代码中使用百度地图API

type=WebGL: BMapGL 【vue-bmap-gl】直接在JS代码中使用百度地图API

方式四：引入3D百度地图-WebGL 类型 使用 el-bmap组件

type=WebGL: BMapGL 【vue-bmap-gl】 使用 el-bmap组件

vue2-使用百度地图vue-bmap-gl 参考

其他方式： BMapGL/MapVGL/BMapGLLib

vue2-使用百度地图BMapGL new BMapGL.Map/ MapVGL

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

文章分类

阅读排行榜

推荐排行榜

路漫漫其修远兮吾将上下而求索

0.前缀准备工作：申请ak ，安装 npm install vue-baidu-map

进入网址百度地图开放平台： https://lbsyun.baidu.com/apiconsole/center#/home 在控制台新建应用复制访问应用的ak

前期准备:申请ak 前往百度地图开发平台注册百度账号,申请密钥【https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey】

引入3D百度地图-WebGL类型直接在JS代码中使用百度地图API

方式四：引入3D百度地图-WebGL 类型使用 el-bmap组件

type=WebGL: BMapGL 【vue-bmap-gl】使用 el-bmap组件