Vue Baidu Map 3.x

https://github.com/yangjianfei/vue-baidu-map-3x
Admin
A Vue 3 component for integrating Baidu Maps, supporting v2.0, v3.0, and WebGL map types, built with...
Tokens:115,835
Snippets:164
Trust Score:8.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Vue Baidu Map 3x - Installation and Usage

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/bmaplib/index.html

Guides for installing and getting started with the vue-baidu-map-3x library, including basic setup and quick start instructions.

```APIDOC
Vue Baidu Map 3x - Getting Started:

Installation:
  Description: Instructions on how to add the vue-baidu-map-3x library to your Vue.js project, typically via npm or yarn.
  Command Example:
    npm install vue-baidu-map-3x
    # or
    yarn add vue-baidu-map-3x

Quick Start:
  Description: Basic steps to integrate the Baidu Map component into a Vue application, including obtaining a Baidu Map API key and configuring the map component.
  Steps:
    1. Obtain a Baidu Map API key.
    2. Import and register the `baidu-map` component.
    3. Use the `<baidu-map>` tag in your template, configuring essential props like `ak` (API key), `center`, and `zoom`.
  Example:
    <template>
      <div style="height: 500px;">
        <baidu-map :ak="'YOUR_BAIDU_MAP_AK'" :center="{lng: 116.404, lat: 39.915}" :zoom="12"></baidu-map>
      </div>
    </template>

    <script>
    import BaiduMap from 'vue-baidu-map-3x';
    export default {
      components: { BaiduMap }
    }
    </script>
```

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

### CDN Global Registration

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/begin/use.md

Provides an example of how to register the vue-baidu-map-3x plugin globally when using it via a CDN. This is useful for simpler projects or when not using a module bundler.

```javascript
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
```

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

### Hello World: Basic Map Display

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/begin/use.md

A simple example showcasing the basic usage of the `<baidu-map>` component to display a map centered on a specific location ('北京') with a given zoom level. It also includes basic styling for the map container.

```html
<template>
  <baidu-map class="map" center="北京" :zoom="5"></baidu-map>
</template>

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

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

### Info Window with Markers (Incorrect Usage Example)

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/hole/index.md

Illustrates a common pattern for displaying information windows associated with map markers within a loop. This example shows an incorrect implementation where multiple info windows might be attempted, noting the limitation that only one info window can be active at a time. It references external documentation for correct handling.

```html
<baidu-map class="map" :center="{lng: location.lng, lat: location.lat}" :zoom="15" style="height: 800px;">
	<div v-for="item in locationInfo"> 
		<bm-marker :position="{lng: item.location.lng, lat: item.location.lat}" :dragging="false" @click="item.open = true">
			<bm-info-window :show="item.open" @close="item.open=false" @open="item.open = true">
				{{ item }}
			</bm-info-window>
		</bm-marker>
	</div>
</baidu-map>
```

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

### Vue Walking Route Planning Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/search/walking.md

Example of using the BmWalking component in Vue.js to plan a walking route between two locations on a Baidu Map. It demonstrates setting start, end, and auto-viewport properties.

```Vue
<template>
  <div>
    <baidu-map class="map" style="overflow:auto" center="北京">
      <bm-walking start="百度大厦" end="北京邮电大学西门" :auto-viewport="true" location="北京"></bm-walking>
    </baidu-map>
  </div>
</template>
```

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

### NPM Installation for Vue Baidu Map 3x

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/begin/install.md

Install the Vue Baidu Map 3x library using NPM. This command is suitable for Vue 3 projects. For Vue 2 projects, a different package name is used.

```bash
// vue3
$ npm install vue-baidu-map-3x --save
```

```bash
// vue2
$ npm install vue2-baidu-map --save
```

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

### Install vue-baidu-map-3x

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/README.md

Command to install the vue-baidu-map-3x package using npm.

```bash
npm i --save vue-baidu-map-3x
```

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

### Vue Baidu Map Basic Hello World Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/begin/use.html

A simple 'Hello World' example showcasing the basic integration of the BaiduMap component. It sets a fixed center location ('北京') and zoom level, and includes basic CSS for styling the map container.

```html
<template>
  <baidu-map class="map" center="北京" :zoom="5"></baidu-map>
</template>

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

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

### Driving Route Planning

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/hole/index.md

Provides an example of using the `bm-driving` component to plan a route. It demonstrates how to set start and end points, enable auto-viewport, specify a policy, use a panel for results, and include waypoints. It also notes differences in parameter handling between WebGL and API versions.

```javascript
const lushuPoint = ref({
  start: {
    lng: 116.301934,
    lat: 39.977552
  },
  end: {
    lng: 116.508328,
    lat: 39.919141
  },
});

// Example usage in template:
// <bm-driving :start="lushuPoint.start" :end="lushuPoint.end" :auto-viewport="true" :policy="policy" :panel="true" location="北京" :waypoints="['西二旗']">
// </bm-driving>
```

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

### Basic Baidu Map Initialization

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/hole/index.md

Demonstrates the fundamental setup for initializing a Baidu Map component. It highlights the necessity of setting the `center` and `zoom` properties for the map to render correctly, and that the map container must have a defined height.

```html
<baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
</baidu-map>

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

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

### Vue: BmGround Component Usage Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/overlay/ground.md

Demonstrates how to use the BmGround component within a Vue.js application to display a ground layer with specific bounds, image, and opacity settings. This example requires the vue-baidu-map-3x library.

```vue
<template>
  <div>
    <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="12">
      <bm-ground :bounds="bounds" imageURL="//developer.baidu.com/map/jsdemo/img/si-huan.png" :opacity="1" :displayOnMinLevel="10" :displayOnMaxLevel="14">
      </bm-ground>
    </baidu-map>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const bounds = ref({
  ne: {
    lng: 116.475451,
    lat: 39.9764
  },
  sw: {
    lng: 116.29579,
    lat: 39.837146
  }
});
</script>
```

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

### Code Intelligence Prompt Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/indexno.md

Demonstrates the code intelligence feature of the project, showing a GIF of how code suggestions and autocompletion work within the development environment.

```html
<p align="center">
  <h2 class="mb12">代码智能提示</h2>
  <img class="card-img" src="./image/map-tip.gif" title="代码智能提示" alt="代码智能提示"/>
</p>
```

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

### Correct Usage: Using the 'ready' Event

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/begin/use.md

Demonstrates the correct way to interact with the BaiduMap component and its API. It shows how to use the `@ready` event to access the BMap instance and map object, ensuring all map resources are loaded before making changes.

```html
<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 = 116.404;
  center.value.lat = 39.915;
  zoom.value = 15;
}
</script>
```

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

### Map Events and Info Window Handling

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/hole/index.html

Covers map loading events such as `init`, `load`, `loaded`, and `ready`, advising users to try alternatives if one doesn't work. It highlights that only one info window can exist at a time and shows an example of incorrect loop usage for markers and info windows.

```vue
<baidu-map class="map" :center="{lng: location.lng, lat: location.lat}" :zoom="15" style="height: 800px;">
	<div v-for="item in locationInfo"> 
		<bm-marker :position="{lng: item.location.lng, lat: item.location.lat}" :dragging="false" @click="item.open = true">
			<bm-info-window :show="item.open" @close="item.open=false" @open="item.open = true">
				{{ item }}
			</bm-info-window>
		</bm-marker>
	</div>
</baidu-map>
```

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

### Add Heatmap Component

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/bmaplib/heatmap.html

This example demonstrates how to integrate a heatmap layer into a Baidu Map using the `BmlHeatmap` component from the `vue-baidu-map-3x` library. It covers the template setup for the map and heatmap, along with the script section for importing necessary components and defining the heatmap data.

```Vue.js
<template>
  <div>
    <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="14">
      <bml-heatmap :data="data" :max="100" :radius="20">
      </bml-heatmap>
    </baidu-map>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BmlHeatmap } from 'vue-baidu-map-3x';

const data = ref([
  { lng: 116.418261, lat: 39.921984, count: 50 },
  { lng: 116.423332, lat: 39.916532, count: 51 },
  { lng: 116.419787, lat: 39.930658, count: 15 },
  { lng: 116.418455, lat: 39.920921, count: 40 },
  { lng: 116.418843, lat: 39.915516, count: 100 },
  { lng: 116.42546, lat: 39.918503, count: 6 },
  { lng: 116.423289, lat: 39.919989, count: 18 },
  { lng: 116.418162, lat: 39.915051, count: 80 },
  { lng: 116.422039, lat: 39.91782, count: 11 },
  { lng: 116.41387, lat: 39.917253, count: 7 },
  { lng: 116.41773, lat: 39.919426, count: 42 },
  { lng: 116.421107, lat: 39.916445, count: 4 },
  { lng: 116.417521, lat: 39.917943, count: 27 },
  { lng: 116.419812, lat: 39.920836, count: 23 },
  { lng: 116.420682, lat: 39.91463, count: 60 },
  { lng: 116.415424, lat: 39.924675, count: 8 },
  { lng: 116.419242, lat: 39.914509, count: 15 },
  { lng: 116.422766, lat: 39.921408, count: 25 },
  { lng: 116.421674, lat: 39.924396, count: 21 },
  { lng: 116.427268, lat: 39.92267, count: 1 },
  { lng: 116.417721, lat: 39.920034, count: 51 },
  { lng: 116.412456, lat: 39.92667, count: 7 },
  { lng: 116.420432, lat: 39.919114, count: 11 },
  { lng: 116.425013, lat: 39.921611, count: 35 },
  { lng: 116.418733, lat: 39.931037, count: 22 },
  { lng: 116.419336, lat: 39.931134, count: 4 },
  { lng: 116.413557, lat: 39.923254, count: 5 },
  { lng: 116.418367, lat: 39.92943, count: 3 },
  { lng: 116.424312, lat: 39.919621, count: 100 },
  { lng: 116.423874, lat: 39.919447, count: 87 },
  { lng: 116.424225, lat: 39.923091, count: 32 },
  { lng: 116.417801, lat: 39.921854, count: 44 },
  { lng: 116.417129, lat: 39.928227, count: 21 },
  { lng: 116.426426, lat: 39.922286, count: 80 },
  { lng: 116.421597, lat: 39.91948, count: 32 },
  { lng: 116.423895, lat: 39.920787, count: 26 },
  { lng: 116.423563, lat: 39.921197, count: 17 },
  { lng: 116.417982, lat: 39.922547, count: 17 },
  { lng: 116.426126, lat: 39.921938, count: 25 },
  { lng: 116.42326, lat: 39.915782, count: 100 },
  { lng: 116.419239, lat: 39.916759, count: 39 },
  { lng: 116.417185, lat: 39.929123, count: 11 },
  { lng: 116.417237, lat: 39.927518, count: 9 },
  { lng: 116.417784, lat: 39.915754, count: 47 },
  { lng: 116.420193, lat: 39.917061, count: 52 },
  { lng: 116.422735, lat: 39.915619, count: 100 },
  { lng: 116.418495, lat: 39.915958, count: 46 },
  { lng: 116.416292, lat: 39.931166, count: 9 },
  { lng: 116.419916, lat: 39.924055, count: 8 },
  { lng: 116.42189, lat: 39.921308, count: 11 },
  { lng: 116.413765, lat: 39.929376, count: 3 },
  { lng: 116.418232, lat: 39.920348, count: 50 },
  { lng: 116.417554, lat: 39.930511, count: 15 },
  { lng: 116.418568, lat: 39.918161, count: 23 },
  { lng: 116.413461, lat: 39.926306, count: 3 },
  { lng: 116.42232, lat: 39.92161, count: 13 },
  { lng: 116.4174, lat: 39.928616, count: 6 },
  { lng: 116.424679, lat: 39.915499, count: 21 },
  { lng: 116.42171, lat: 39.915738, count: 29 },
  { lng: 116.417836, lat: 39.916998, count: 99 },
  { lng: 116.420755, lat: 39.928001, count: 10 },
  { lng: 116.414077, lat: 39.930655, count: 14 },
  { lng: 116.426092, lat: 39.922995, count: 16 },
  { lng: 116.41535, lat: 39.931054, count: 15 },
  { lng: 116.413022, lat: 39.921895, count: 13 },
  { lng: 116.415551, lat: 39.913373, count: 17 },
  { lng: 116.421191, lat: 39.926572, count: 1 },
  { lng: 116.419612, lat: 39.917119, count: 9 },
  { lng: 116.418237, lat: 39.921337, count: 54 },
  { lng: 116.423776, lat: 39.921919, count: 26 },
  { lng: 116.417694, lat: 39.92536, count: 17 },
  { lng: 116.415377, lat: 39.914137, count: 19 },
  { lng: 116.417434, lat: 39.914394, count: 43 },
  { lng: 116.42588, lat: 39.922622, count: 27 },
  { lng: 116.418345, lat: 39.919467, count: 8 },
  { lng: 116.426883, lat: 39.917171, count: 3 },
  { lng: 116.423877, lat: 39.916659, count: 34 },
  { lng: 116.415712, lat: 39.915613, count: 14 },
  { lng: 116.419869, lat: 39.931416, count: 12 },
  { lng: 116.416956, lat: 39.925377, count: 11 },
  { lng: 116.42066, lat: 39.925017, count: 38 },
  { lng: 116.416244, lat: 39.920215, count: 91 },
  { lng: 116.41929, lat: 39.915908, count: 54 },
  { lng: 116.422116, lat: 39.919658, count: 21 },
  { lng: 116.4183, lat: 39.925015, count: 15 }
]);
</script>
```

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

### Vue Baidu Map 3x Initialization

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/offline-map/index.html

This snippet demonstrates how to initialize the vue-baidu-map-3x library in a Vue application. It shows the necessary import statements and how to use `app.use()` to configure the map with an API key and version. It also includes an example of using an offline map plugin.

```JavaScript
import BaiduMapOffline from 'vue-baidu-map-offline';
import BaiduMap from 'vue-baidu-map-3x'

app.use(BaiduMapOffline, {
    offline: true
});
app.use(BaiduMap, {
    ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
    v: '3.0',
    // type: 'WebGL'
});

```

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

### Install vue-baidu-map-3x

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/README.en.md

Installs the vue-baidu-map-3x package using npm. This is the first step to integrate Baidu Maps into your Vue 3 project.

```bash
npm i --save vue-baidu-map-3x
```

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

### Vue Baidu Map Correct Usage Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/begin/use.html

Illustrates the correct method for initializing and updating the Baidu Map component using the `@ready` event. This ensures that map properties like center and zoom are set after the map instance is fully loaded and ready for interaction.

```javascript
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 = 116.404;
  center.value.lat = 39.915;
  zoom.value = 15;
}
```

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

### Get Location Info via Coordinates using vue-baidu-map-3x

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/doc/util/hooks.html

Demonstrates how to use the `useGeocoder` hook to get address information from geographical coordinates. It shows chaining with `getPoint` for reverse geocoding and `getLocation` for forward geocoding, requiring the `vue-baidu-map-3x` library.

```javascript
import { useGeocoder, usePoint } from 'vue-baidu-map-3x';

useGeocoder().then((geocoder) => {
  geocoder.getPoint('广东省深圳市光明新区红花山公园', (res) => {
    console.log(res);
  });
  usePoint(116.404, 39.915).then(point => {
    geocoder.getLocation(point, (result) => {
      console.log(result);
    });
  });
});
```

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

### BmWalking Component API Documentation

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/search/walking.md

API documentation for the BmWalking component, detailing its properties and events for walking route planning. Properties define search parameters like location, start, and end points, while events provide callbacks for search completion and map updates.

```APIDOC
BmWalking Component Properties:

location: String, Point, None
  - Description: Specifies the search area. Can be null, a coordinate point, or a city name string. If null, the search area defaults to the current map center. Results will be automatically loaded onto the map, and map zoom levels can be adjusted.
  - If a coordinate point is provided, the search area is determined by the location of that point.
  - If a city name is provided, the search is conducted within that city.

start: String, Point, LocalResultPoi
  - Description: The starting point for the route. Accepts a keyword string, a coordinate point (supported since v1.1), or a LocalSearchPoi instance.

end: String, Point, LocalResultPoi
  - Description: The ending point for the route. Accepts a keyword string, a coordinate point (supported since v1.1), or a LocalSearchPoi instance.

panel: Boolean
  - Default: true
  - Description: Determines whether to display the search results panel.

autoViewport: Boolean
  - Description: Automatically adjusts the map's viewport after the search is completed.

selectFirstResult: Boolean
  - Description: Automatically selects the first search result.

BmWalking Component Events:

markersset: {pois: Array}
  - Description: Callback function invoked after markers have been added to the map.

infohtmlset: {poi: LocalResultPoi, html: HTMLElement}
  - Description: Callback function invoked after the content for marker popups has been created.

resultshtmlset: {container: HTMLElement}
  - Description: Callback function invoked after the search results list has been added to the DOM.

searchcomplete: {results: WalkingRouteResult}
  - Description: Callback function invoked when the search is completed. For multi-keyword searches, the parameter returns an array of LocalResult objects, with the order matching the input keywords.

polylinesset: {routes: Array}
  - Description: Callback function invoked after polylines representing routes have been added to the map.
```

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

### Vue Template Example for BmTransit

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/search/transit.md

Example of using the BmTransit component within a Vue template to plan a public transit route between 'Baidu Building' and 'West Gate of Beijing University of Posts and Telecommunications'.

```vue
<template>
  <div>
    <baidu-map class="map" center="北京">
      <bm-transit start="百度大厦" end="北京邮电大学西门" :auto-viewport="true" location="北京"></bm-transit>
    </baidu-map>
  </div>
</template>
```

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

### Vue Baidu Map: Driving Route Planning Example

Source: https://github.com/yangjianfei/vue-baidu-map-3x/blob/main/docs/search/driving.md

Demonstrates how to use the BmDriving component to plan a driving route. It includes controls to switch between shortest distance and shortest time policies, and displays the route on the map. The example uses Vue.js and Baidu Maps API.

```vue
<template>
  <div>
      <div>
        <button @click="leastDistance"> 最短距离 </button>
        <button @click="leastTime"> 最短时间 </button>
      </div>
      <baidu-map class="map" style="overflow:auto" center="北京" :zoom="16">
        <bm-driving :start="lushuPoint.start" :end="lushuPoint.end" :auto-viewport="true" :policy="policy" :panel="true" location="北京" :waypoints="['西二旗']">
        </bm-driving>
      </baidu-map>
    </div>
</template>
```

```javascript
import { ref } from 'vue';

const policy = ref('');
const lushuPoint = ref({
  start: {
    lng: 116.301934,
    lat: 39.977552
  },
  end: {
    lng: 116.508328,
    lat: 39.919141
  },
});

const leastDistance = () => {
  policy.value = "BMAP_DRIVING_POLICY_LEAST_DISTANCE"
};
const leastTime = () => {
  policy.value = "BMAP_DRIVING_POLICY_LEAST_TIME"
};

```
Tokens:
Raw