### Development Setup for vue3-baidu-map-gl

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/README.md

Steps to set up the development environment for contributing to or working with the vue3-baidu-map-gl project. This includes cloning the repository, installing dependencies, and running development servers for components and documentation.

```bash
# Environment
# pnpm >= 6.0.0
# node >= 12.0.0

# clone
git clone https://github.com/yue1123/vue3-baidu-map-gl
cd ./vue3-baidu-map-gl

# install
pnpm install

# Run dev, real-time component library build
pnpm dev

# Run documentation site, used to test components and preview documentation
pnpm docs:dev
```

--------------------------------

### Coordinate Conversion Example

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePointConvertor.md

This example shows how to initialize a Map component and then use the `usePoint` hook to set a point's coordinates after the map is initialized. This is a common pattern when working with map components and their associated functionalities.

```html
<Map @initd="handleInitd"></Map>

<script setup lang="ts">
  import { useAreaBoundary } from 'vue3-baidu-map-gl'

  const { point, set } = usePoint()

  function handleInitd() {
    set({
      lng: 116.297611,
      lat: 40.047363
    })
  }
</script>
```

--------------------------------

### Install MapV GL Libraries via npm

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/mapv.md

Provides the npm and pnpm commands to install the core MapV library, the MapV GL extension library, and the MapV Three.js related library.

```Shell
# mapv 基础库
npm add mapv
# or
pnpm add mapv
# ----------------------
# mapvgl GL扩展库
npm add mapvgl
# or
pnpm add mapvgl
# ----------------------
# mapv-three three.js 相关库
npm add mapv-three
# or
pnpm add mapv-three
```

--------------------------------

### Install vue3-baidu-map-gl

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/README.md

Instructions for installing the vue3-baidu-map-gl library using different package managers like pnpm, yarn, and npm. This is the first step to integrate the library into your Vue 3 project.

```bash
# with pnpm
pnpm add vue3-baidu-map-gl

# or with yarn
yarn add vue3-baidu-map-gl

# or with npm
npm install vue3-baidu-map-gl
```

--------------------------------

### Install Vue3 BaiduMap GL with Package Managers

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/installation.md

Installs the Vue3 BaiduMap GL library using popular package managers: pnpm, yarn, and npm. This is the recommended method for use with build tools like Vite or webpack.

```bash
pnpm add vue3-baidu-map-gl
```

```bash
yarn add vue3-baidu-map-gl
```

```bash
npm install vue3-baidu-map-gl
```

--------------------------------

### Initialize and Control Track Animation

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useTrackAnimation.md

Demonstrates how to initialize and control the track animation using the `useTrackAnimation` hook. It shows how to get control functions like `setPath`, `start`, `cancel`, `stop`, `proceed`, and the animation `status`.

```javascript
const { setPath, start, cancel, stop, proceed, status } = useTrackAnimation(map, options)
```

--------------------------------

### Import MapV GL Libraries

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/mapv.md

Demonstrates how to import the MapV, MapV GL, and MapV Three libraries after installing them via npm.

```TypeScript
import * as mapv from 'mapv'
import * as mapvgl from 'mapvgl'
import * as mapvThree from 'mapv-three'
```

--------------------------------

### Initialize and Use useIpLocation

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useIpLocation.md

Demonstrates how to initialize the `useIpLocation` hook and access its returned values. The `get` method should be called after the `Map` component is initialized.

```typescript
const { get, location, isLoading } = useIpLocation(cal)
```

--------------------------------

### Volar Support Configuration

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/quick-start.md

Configuration for Volar IDE support to enhance type hinting for global components in Vue3 BaiduMap GL. This involves updating the `tsconfig.json` file to include the necessary types.

```json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vue3-baidu-map-gl/volar"]
  }
}
```

--------------------------------

### On-Demand Import Vue Components

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/quick-start.md

Demonstrates on-demand importing of Vue3 BaiduMap GL components like BMap and BZoom. This approach leverages ES Module's Tree Shaking, ensuring that only the components used in the project are included in the final build, optimizing bundle size.

```vue
<template>
  <BMap>
    <BZoom />
    <!-- ... -->
  </BMap>
</template>

<script setup lang="ts">
  import { BMap, BZoom } from 'vue3-baidu-map-gl'
</script>
```

--------------------------------

### Full Import Vue3 BaiduMap GL

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/quick-start.md

This code snippet demonstrates how to perform a full import of the Vue3 BaiduMap GL library. While convenient, it may lead to larger bundle sizes due to the loss of Tree Shaking functionality. This method is suitable if bundle size is not a primary concern.

```typescript
import { createApp } from 'vue'
import Vue3BaiduMapGL from 'vue3-baidu-map-gl'

const app = createApp(App)
app.use(Vue3BaiduMapGL)
```

--------------------------------

### Handle Map Drag Start Event (dragstart)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'dragstart' event is emitted when the user begins to drag the map. It provides the event type, target, pixel coordinates, and the geographical point where the drag started.

```Vue
<template>
  <baidu-map-gl @dragstart="handleDragStart" ... />
</template>

<script>
export default {
  methods: {
    handleDragStart({ type, target, pixel, point }) {
      console.log('Map drag started at:', point);
    }
  }
}
</script>
```

--------------------------------

### Map Component with usePoint Integration

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePoint.md

An example of integrating the `usePoint` hook within a Vue 3 component using the `<Map>` component. The `handleInitd` function is triggered after the map is initialized, allowing the point to be set.

```html
<Map @initd="handleInitd"></Map>

<script setup lang="ts">
  import { useAreaBoundary } from 'vue3-baidu-map-gl'

  const { point, set } = usePoint()

  function handleInitd() {
    set({
      lng: 116.297611,
      lat: 40.047363
    })
  }
</script>
```

--------------------------------

### Use useAreaBoundary Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useAreaBoundary.md

Demonstrates the usage of the `useAreaBoundary` hook, extracting `isLoading`, `boundaries`, and the `get` function. The `get` function is used to fetch region boundaries.

```ts
const { isLoading, boundaries, get } = useAreaBoundary(cal)
```

--------------------------------

### Include Vue3 BaiduMap GL via Browser CDN (unpkg)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/installation.md

Includes the Vue3 BaiduMap GL library directly in the browser using a CDN link from unpkg. This makes the library available globally as `Vue3baiduMapGl`. It's recommended to specify a version.

```html
<head>
  <meta charset="utf-8" />
  <!-- Import Vue3 -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- Import Vue3 BaiduMap GL -->
  <!-- Would use latest version, you'd better specify a version -->
  <script src="https://unpkg.com/vue3-baidu-map-gl"></script>
</head>
```

--------------------------------

### Handle Touch Start Event (touchstart)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'touchstart' event is specifically for mobile devices and is triggered when a touch action begins on the map. It provides the event type and the target map instance.

```Vue
<template>
  <baidu-map-gl @touchstart="handleTouchStart" ... />
</template>

<script>
export default {
  methods: {
    handleTouchStart({ type, target }) {
      console.log('Touch started on map.');
    }
  }
}
</script>
```

--------------------------------

### Handle Map Zoom Start Event (zoomstart)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'zoomstart' event is triggered when the user begins to change the map's zoom level. It signals the start of a zoom operation.

```Vue
<template>
  <baidu-map-gl @zoomstart="handleZoomStart" ... />
</template>

<script>
export default {
  methods: {
    handleZoomStart({ type, target }) {
      console.log('Map zoom started.');
    }
  }
}
</script>
```

--------------------------------

### Include Vue3 BaiduMap GL via Browser CDN (jsDelivr)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/installation.md

Includes the Vue3 BaiduMap GL library directly in the browser using a CDN link from jsDelivr. This makes the library available globally as `Vue3baiduMapGl`. It's recommended to specify a version.

```html
<head>
  <!-- Import Vue 3 -->
  <script src="https//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import Vue3 BaiduMap GL -->
  <script src="https://cdn.jsdelivr.net/npm/vue3-baidu-map-gl"></script>
</head>
```

--------------------------------

### Basic Marker Usage

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/overlay/marker.md

Demonstrates how to add a marker to the map. The 'overlay/marker' example likely shows how to specify an icon for the marker and handle basic interactions like dragging.

```vue
:::demo 在地图上添加标记点，通过 icon 指定显示图标, 尝试拖动图片
overlay/marker
:::
```

--------------------------------

### usePointGeocoder - Usage

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePointGeocoder.md

usePointGeocoder hooks 的基本用法，返回 isLoading, isEmpty, result, 和 get 方法。get 方法需要在 Map 组件初始化完毕后才能调用。

```typescript
const { get, result, isLoading, isEmpty } = usePointGeocoder(options, cal)
```

--------------------------------

### Initialize and Control View Animation

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useViewAnimation.md

This snippet demonstrates how to initialize and control the view animation using the `useViewAnimation` hook. It includes setting keyframes, starting, stopping, canceling, and proceeding with the animation, as well as accessing its status.

```typescript
const { setKeyFrames, start, cancel, stop, proceed, status } = useViewAnimation(map, options)
```

--------------------------------

### Vue3 BaiduMap Gl - Component Examples

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/introduction.md

The library offers over 20 high-quality, ready-to-use Vue 3 components and 8+ hooks for Baidu Maps GL. These components are designed with an intuitive and minimalist API, providing a good development experience.

```javascript
// Example of using a map component:
<template>
  <BaiduMapGL :ak="'YOUR_AK'">
    <BaiduMapMarker :position="{lng: 116.404, lat: 39.915}" />
  </BaiduMapGL>
</template>

<script setup>
import { BaiduMapGL, BaiduMapMarker } from 'vue3-baidu-map-gl';
</script>
```

--------------------------------

### Use usePointConvertor Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePointConvertor.md

This snippet demonstrates how to use the `usePointConvertor` hook to get the conversion result, the conversion function, and loading/error states. The `convert` function should be called after the Map component is initialized.

```ts
const { result, convert, isLoading, isError, status } = usePointConvertor()
```

--------------------------------

### Offline Baidu Maps API Loader Script

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/offline-map.md

This JavaScript file, `getApiScripts.js`, provides an example of an entry point for loading offline Baidu Maps API scripts. It configures the base path for the API, sets up the `BMapGL.apiLoad` callback, and dynamically injects the `bmapgl.min.js` script and `bmap.css` stylesheet into the document. This script needs to be hosted and pointed to by the `apiUrl` configuration.

```javascript
// getApiScripts.js
;(function () {
  var offmapcfg = (window.offmapcfg = {})
  var JS__FILE__ = document.currentScript
    ? document.currentScript.src
    : document.scripts[document.scripts.length - 1].src
  offmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf('/') + 1) //地图API主目录

  window.BMapGL_loadScriptTime = new Date().getTime()
  window.BMapGL = window.BMapGL || {}
  window.BMapGL.apiLoad = function () {
    delete window.BMapGL.apiLoad
    if (typeof window._initBMap_ == 'function') {
      window._initBMap_()
    }
  }

  var s = document.createElement('script')
  var link = document.createElement('link')

  s.src = offmapcfg.home + '/bmapgl.min.js'
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('type', 'text/css')
  link.setAttribute('href', offmapcfg.home + '/css/bmap.css')
  document.body.appendChild(s)
  document.getElementsByTagName('head')[0].appendChild(link)
})()
```

--------------------------------

### Handle Map Move Start Event (movestart)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'movestart' event is emitted when the user begins to move the map, such as by panning. This can be used to trigger actions before the map view has changed.

```Vue
<template>
  <baidu-map-gl @movestart="handleMoveStart" ... />
</template>

<script>
export default {
  methods: {
    handleMoveStart({ type, target }) {
      console.log('Map move started.');
    }
  }
}
</script>
```

--------------------------------

### Render InfoWindow with Slot

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/overlay/infowindow.md

Shows an example of rendering different content within an InfoWindow using the slot feature. It also mentions applying custom classes.

```vue
<template>
  <b-info-window class="p-top" v-model:show="true">
    <!-- Custom content here -->
  </b-info-window>
</template>

<script setup>
import { BInfoWindow } from 'vue3-baidu-map-gl';
</script>

<style scoped>
  :deep(img) {
    max-width: none;
  }
  :deep(h2) {
    margin: 0;
    border-top: none;
    padding-top: 0;
    letter-spacing: initial;
    line-height: initial;
  }
</style>
```

--------------------------------

### Use useBrowserLocation Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useBrowserLocation.md

Demonstrates the usage of the `useBrowserLocation` hook, showing how to destructure its returned values: `get` for initiating location retrieval, `location` for the obtained coordinates and address, `isLoading` for the loading state, `isError` for error status, and `status` for the detailed positioning status. The hook can be initialized with optional configuration options and a callback function.

```typescript
const { get, location, isLoading, isError, status } = useBrowserLocation(options, cal)
```

--------------------------------

### Handle Plugin Ready Event

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/mapv.md

Illustrates how to listen for the `pluginReady` event emitted by the `BMap` component after MapV GL plugins have been loaded and are ready for use.

```Vue
<template>
  <BMap :plugins="['Mapvgl', 'Mapv', 'MapvThree']" @pluginReady="handlePluginReady"></BMap>
</template>
<script lang="ts" setup>
  function handlePluginReady() {
    // ...
  }
</script>
```

--------------------------------

### Get and Set Map Point Instance

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePoint.md

Demonstrates how to use the `usePoint` hook to get the map point instance and its setter function. The `set` function is called within the `Map` component's `initd` event to update the point's coordinates.

```typescript
const { point, set } = usePoint()

function handleInitd() {
  set({
    lng: 116.297611,
    lat: 40.047363
  })
}
```

--------------------------------

### usePointGeocoder - Batch Point Geocoding

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePointGeocoder.md

使用坐标点对象数组作为 get 方法参数批量解析坐标点。在 Ts 中使用时，可使用 PointGeocoderResult[] 泛型来推断 result 的类型，避免在遍历时出现 TypeScript 报错。

```typescript
import { usePointGeocoder, PointGeocoderResult } from 'vue3-baidu-map-gl'
const { result } = usePointGeocoder<PointGeocoderResult[]>()
```

--------------------------------

### Import BInfoWindow Component

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/overlay/infowindow.md

Demonstrates how to import the BInfoWindow component from the vue3-baidu-map-gl library.

```typescript
import { BInfoWindow } from 'vue3-baidu-map-gl'
```

--------------------------------

### usePointGeocoder - Single Point Geocoding

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/usePointGeocoder.md

使用坐标点对象作为 get 方法参数解析单个坐标点。在 Ts 中使用时，可使用 PointGeocoderResult 泛型来推断 result 的类型，避免潜在的 TypeScript 报错。

```typescript
import { usePointGeocoder, PointGeocoderResult } from 'vue3-baidu-map-gl'
const { result } = usePointGeocoder<PointGeocoderResult>()
```

--------------------------------

### Get Default Marker Icons

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useDefaultMarkerIcons.md

Demonstrates how to call the useDefaultMarkerIcons hook to obtain a collection of default BMapGL.Icon instances. These icons are returned as a key-value pair.

```ts
const icons = useDefaultMarkerIcons()
```

--------------------------------

### Import useIpLocation Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useIpLocation.md

Imports the `useIpLocation` hook from the `vue3-baidu-map-gl` library. This is the initial step to use the IP location functionality.

```typescript
import { useIpLocation } from 'vue3-baidu-map-gl'
```

--------------------------------

### Import BAutoComplete Component

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/autoComplete/index.md

This snippet shows how to import the BAutoComplete component from the vue3-baidu-map-gl library. It's a common starting point for using the component in your Vue.js application.

```typescript
import { BAutoComplete } from 'vue3-baidu-map-gl'
```

--------------------------------

### Import BPanoramaCoverageLayer

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/layer/panorama-coverage.md

Demonstrates how to import the BPanoramaCoverageLayer component from the vue3-baidu-map-gl library.

```typescript
import { BPanoramaCoverageLayer } from 'vue3-baidu-map-gl'
```

--------------------------------

### Import useAddressGeocoder

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useAddressGeocoder.md

Imports the `useAddressGeocoder` hook from the `vue3-baidu-map-gl` library.

```typescript
import { useAddressGeocoder } from 'vue3-baidu-map-gl'
```

--------------------------------

### Use useDefaultMarkerIcons in Vue Component

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useDefaultMarkerIcons.md

Shows a complete Vue component example that utilizes the useDefaultMarkerIcons hook. The hook is called within the handleInitd function, which is triggered after the Map component is initialized.

```vue
<template>
  <Map @initd="handleInitd"></Map>
</template>

<script setup lang="ts">
  import { useAreaBoundary } from 'vue3-baidu-map-gl'

  function handleInitd() {
    const icons = useDefaultMarkerIcons()
    // ...
  }
</script>
```

--------------------------------

### Draw Editable Polygon

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/overlay/polygon.md

Demonstrates how to draw an editable polygon on the map using the BPolygon component. This is a basic usage example for creating interactive polygons.

```javascript
<!-- Example usage for drawing an editable polygon -->
<BPolygon :path="polygonPath" :enableEditing="true" />
```

--------------------------------

### Asynchronous BMapGL Loading with BMap Draw

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/bmap-draw.md

Demonstrates how to asynchronously load the BMap Draw library, which is necessary because BMapGL is loaded asynchronously and BMap Draw contains synchronous calls to BMapGL constructors.

```TypeScript
import('bmap-draw').then(({ DrawScene }) => {
  // ...
})
```

--------------------------------

### Display Administrative Region Boundaries

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useAreaBoundary.md

An example of using the `useAreaBoundary` hook in conjunction with the `Polygon` component to display administrative region boundaries. The `isBoundary` prop is set to `true` on the `Polygon` component for this effect.

```html
<Map @initd="handleInitd"></Map>

<script setup lang="ts">
  import { useAreaBoundary } from 'vue3-baidu-map-gl'

  const { isLoading, boundaries, get } = useAreaBoundary()

  function handleInitd() {
    get('北京市')
  }
</script>
```

--------------------------------

### Load Custom Plugin (TS)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/config.md

Demonstrates how to create and load a custom plugin using a Promise-returning function in TypeScript. The plugin executes after the map loads.

```typescript
const customPlugin = () => {
  return new Promise((resolve) => {
    console.log('自定义插件')
    // 加载相关资源
    // 加载完成后可 resolve 一个对象, 插件名和插件所导出的类, 便于通过 pluginRead 更好的访问
    resolve({
      // [pluginName]: pluginClass
    })
  })
}
```

```typescript
app.use(baiduMap, {
  plugins: [customPlugin]
})
```

--------------------------------

### useAddressGeocoder Usage

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useAddressGeocoder.md

Illustrates the basic usage of the `useAddressGeocoder` hook, destructuring its returned properties: `get` (the geocoding function), `point` (the geocoded coordinates), `isLoading` (loading state), and `isEmpty` (empty result state).

```typescript
const { get, point, isLoading, isEmpty } = useAddressGeocoder(cal)
```

--------------------------------

### Load Custom Plugin (HTML)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/guide/config.md

Shows how to load a custom plugin directly within the BMap component's template using a Promise-returning function.

```html
<BMap :plugins="[customPlugin]" />
```

--------------------------------

### Handle Plugin Ready Event (pluginReady)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'pluginReady' event is triggered once a specific plugin has finished loading and is ready for use. It returns the map instance and a record of the loaded plugin.

```Vue
<template>
  <baidu-map-gl @pluginReady="handlePluginReady" ... />
</template>

<script>
export default {
  methods: {
    handlePluginReady({ map, pluginRecord }) {
      console.log('Plugin ready:', pluginRecord);
    }
  }
}
</script>
```

--------------------------------

### Dynamic Marker Rendering

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/overlay/marker.md

Shows how to dynamically render markers based on changing data. The 'overlay/dyynmicMaker' example illustrates updating markers in response to data changes, such as clicking an update button.

```vue
:::demo class="p-bottom"
overlay/dyynmicMaker
:::
```

--------------------------------

### Import useAreaBoundary Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useAreaBoundary.md

Imports the `useAreaBoundary` hook from the `vue3-baidu-map-gl` library. This is the initial step to utilize the hook's functionality.

```ts
import { useAreaBoundary } from 'vue3-baidu-map-gl'
```

--------------------------------

### Import useViewAnimation Hook

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/hooks/useViewAnimation.md

This snippet shows how to import the `useViewAnimation` hook from the `vue3-baidu-map-gl` library.

```typescript
import { useViewAnimation } from 'vue3-baidu-map-gl'
```

--------------------------------

### Configure MapV GL Plugins Globally

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/expand/mapv.md

Demonstrates how to globally configure MapV GL related plugins (Mapvgl, Mapv, MapvThree) for the Vue Baidu Map component using the `app.use` method.

```TypeScript
app.use(baiduMap, {
  plugins: ['Mapvgl', 'Mapv', 'MapvThree']
})
```

--------------------------------

### Handle Map Load Event (load)

Source: https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/zh-CN/components/map.md

The 'load' event is triggered when the map's position and zoom level are set, even if map tiles are still loading. It's useful for initial setup actions.

```Vue
<template>
  <baidu-map-gl @load="handleLoad" ... />
</template>

<script>
export default {
  methods: {
    handleLoad({ type, target }) {
      console.log('Map has loaded its initial state.');
    }
  }
}
</script>
```