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

vue-baidu-map-3x（支持vue3/vue2版本和webGl api）

步骤1：安装

 VUE3安装vue-baidu-map-3x：

 npm install vue-baidu-map-3x --save   

步骤2：引入 & 注册 

// 全局注册：在main.js中

import BaiduMap from 'vue-baidu-map-3x'

app.use(BaiduMap, {

  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */

    ak: 'oukWFWRKCGktlhX25uFBpEt0nV4XXXXX', ////     //个人手机号私人使用-July_zhengfj  

    v:'2.0',  // 默认使用3.0

   type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL) 

});

 

步骤3：使用

 

<template>
    <div class="content">
        <P>   https://map.heifahaizei.com/doc/begin/install.html    -   npm install vue-baidu-map-3x --save     </P>
        <baidu-map class="bm-view" :zoom="12" :center="{lng: 102.6976218355306, lat:25.0407935}" > 
            <bm-marker :position="{lng: 102.6976218355306, lat:25.0407935}" :dragging="true" ></bm-marker>
            <bm-marker :position="{lng: 102.6976218355306, lat:25.0490}" :dragging="true"  :mapStyle="mapStyle"></bm-marker>
    </baidu-map>

    </div>
</template> 
 

 
<script setup>     
import { ref } from 'vue';
//https://lbs.baidu.com/apiconsole/custommap
//https://lbs.baidu.com/customv2/editor/26e6ad36dabc2cefc9961cb7a870da9d/chuxing
const mapStyle = ref({
  styleJson:[]
}); 
 
//钩子函数
onBeforeMount(() => {

})
</script>
 

<style lang="less" scoped>

.content, .bm-view {
   width: 100%;
   height: 300px;
 }
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
::v-deep .anchorBL,
::v-deep .anchorTR,
::v-deep .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
</style>
   

运行结果截图

 

其他：npm install vue2-baidu-map

vue2中百度地图 【vue2-baidu-map】

 

https://map.heifahaizei.com/doc/index.html

npm install vue2-baidu-map --save 

代码

<template>
    <div   class="sub-map002"> 
   <baidu-map class="bm-view" :center="centerLagLat" :zoom="14" :scroll-wheel-zoom="true" ></baidu-map>
  </div>
  </template>
  
  <script>  
import Vue from "vue"; 
import BaiduMap from 'vue2-baidu-map'; 
Vue.use(BaiduMap, {
  ak: 'oukWFWRKCGktlhX25uFBpEt0nV4xxxxx',  //个人手机号私人使用-July_zhengfj  oukWFWRKCGktlhX25uFBpEt0nV4xxxxx
  type: 'WebGL' // ||API 默认API  ('WebGL'使用此模式 BMap=BMapGL)
});
  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>

 vue-bmap-gl:百度地图WebGL版本的地图组件封装

vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 该版本对原组件进行升级，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定。 支持全量导入、按需导入和自动导入vue2请使用0.x版本，对应分支vue2

https://www.npmjs.com/package/vue-bmap-gl     

百度地图WebGL模式（Vue3）

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