Vite接入百度地图Demo

注册百度账号 -> 申请百度开发者 -> 获取密钥 -> 准备开发

插件 vue-baidu-map-3x

官网地址：'lbsyun.baidu.com/index.php?t…'

main.ts

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

demo.vue

<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    @ready="handler"
  ></baidu-map>
</template>

<script setup lang="ts">
// 没有开启自动导入的需要导入指令哦

const center = ref({ lng: 0, lat: 0 })
const zoom = ref(3)

const handler = ({ BMap, map }: any) => {
  console.log(BMap, map)
  center.value.lng = 116.404
  center.value.lat = 39.915
  zoom.value = 15
}
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 800px;
}
</style>