一、申请百度地图ak密钥

申请步骤

1. ‌登录百度账号‌ 访问 [百度地图开放平台控制台]（控制台 | 百度地图开放平台），若未登录需先注册并登录。

2. ‌创建应用‌ 在控制台选择“创建应用”，填写应用名称（建议与实际应用名称一致），选择‌Android SDK‌作为应用类型。 ‌

3. ‌配置安全码‌

   • ‌安卓开发

     ‌：安全码为应用的签名证书SHA1值与包名的组合（格式为

     SHA1值+packagename

     ）。

     • 获取SHA1值：

       • ‌调试版本‌：使用keytool工具（位于Android Studio安装目录）查询调试签名证书的SHA1值。 ‌

       • ‌发布版本‌：需使用发布时对应的签名证书重新生成SHA1值。 ‌1

     • 包名（packagename）：在AndroidManifest.xml中查找applicationId属性，若applicationId与package不一致，以applicationId为准。

4. ‌提交生成AK‌ 填写完成后点击提交，系统自动生成AK。同一AK可支持开发版和发布版共用，无需修改。 ‌

注意事项

• AK生成后需在应用中启用对应服务（如定位、导航等），未启用服务会导致功能受限。 ‌

• 若需调整服务权限，可在控制台的应用管理页面重新勾选服务并更新AK。

二、使用 vue-baidu-map-3x

安装

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

全局注册 main.ts

import { createApp } from 'vue';
const app = createApp(App);
app.use(BaiduMap, {
    ak: import.meta.env.VITE_BAIDU_AK,
    v: '3.0', // 指定API版本•:ml-citation{ref="8" data="citationList"}
    // type:'WebGL'//||API 默认API （使用此模式 BMap=BMapGL）
});
app.mount('#app');

<template>
    <div>
        <baidu-map 
            ref="baiduMapRef" 
            class="map-container" 
            :center="mapCenter" 
            :mapClick="false" 
            :zoom="initZoom" 
            @ready="handleMapReady">
            
        </baidu-map>
    </div>
</template>
<script setup lang="ts" name="showBaiduMap">
import { BaiduMap} from 'vue-baidu-map-3x';
// 地图初始化参数
const mapCenter = ref({ lng: 114.2612, lat: 30.56536 });
const initZoom = ref(5);
​
    
const handleMapReady = ({ BMap, map }: any) => {
// 地图初始化完成回调
map.enableScrollWheelZoom(true); // 启用滚轮缩放•:ml-citation{ref="4,8" data="citationList"}
};
</script>
<style scoped lang="scss">
    .map-container {
        width: 100%;
        height: calc(100vh - 180px);
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    ::v-deep .anchorBL {
    display: none !important;//此处将百度地图的logo去除
}
</style>

局部注册

<template>
  <baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 114.2612, lat: 30.56536 }" :zoom="5">
  </baidu-map>
</template>
​
<script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script>
​
<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

常见问题

• BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。

• 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。

• 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

错误用法

<template>
  <baidu-map :center="center" :zoom="zoom"></baidu-map>
</template>
​
<script setup>
import {ref,onMounted} from 'vue';
​
const center = ref({lng: 0, lat: 0});
const zoom = ref(3);
​
onMounted(()=>{
  center.value.lng = 114.2612;
  center.value.lat = 30.56536;
  zoom.value = 5;
});
</script>

正确用法

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
​
<script setup>
import {ref,onMounted} from 'vue';
​
const center = ref({lng: 0, lat: 0});
const zoom = ref(3);
​
const handler = ({BMap, map}) => {
  console.log(BMap, map);
  center.value.lng = 114.2612;
  center.value.lat = 30.56536;
  zoom.value = 5;
}
</script>

以上便是初步使用vue-baidu-map-3x，后续将对vue-baidu-map-3x中相关组件的运用进行详细分析及分享。