vue3使用百度地图

前情提要：

本文vue采用vue3框架，使用百度地图通过组件vue-baidu-map-3x：

组件官网：地图容器 | vue-baidu-map-3x

使用百度地图需要 申请百度地图AK秘钥  

步骤：1.进入百度地图开放平台 | 百度地图API SDK | 地图开发 2.打开顶部控制台 3.找到应用管理中-我的应用-创建应用

注意：1.前端开发选择浏览器端，2.必须配置白名单，只有该白名单中的网站才能成功发起调用，多个域名之间请用英文半角逗号隔开，如果不想对任何域名做限制，设置为英文半角星号*

vue3使用

安装 vue-baidu-map-3x

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

全局注册 在main.ts/js 进行注册

import { createApp } from 'vue'
import App from './App.vue'
import BaiduMap from 'vue-baidu-map-3x'

const app = createApp(App);

app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '百度地图ak',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});
app.mount('#app');

使用

<template>
  <div class="maps">
   <baidu-map class="map" ak="0yNijLKpCQV4tplf66hZ8sbWCTTrnZSH" v="3.0" type="API" :center="{ lng: 108.891651, lat: 34.229283 }" :zoom="50" scroll-wheel-zoom>
     <bm-marker :position="{ lng: 108.891651, lat: 34.229283 }" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="我爱北京天安门" />
        </bm-marker>
    </baidu-map>
  </div>
 
</template>
<script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script>

<style>
.maps{
  width: 1200px;
  height: 100%;
}
.map {
  width: 100%;
  height: 300px;
}
</style>

局部注册

局部注册的 BaiduMap 组件必须声明 ak,v,type 属性

<template>
  <baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  </baidu-map>
</template>

<script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script>

<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

常用配置项

ak  //百度地图开发者平台申请的密钥，仅在局部注册组件时声明
center //定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoom  //缩放等级
min-zoom //最小缩放级别
man-zoom //最大缩放级别
dragging //允许拖拽
scroll-wheel-zoom //允许鼠标滚轮缩放
double-click-zoom  //允许双击缩放

其他具体使用配置请参考官网 vue-baidu-map-3x官网 使用