vue-baidu-map-3x

https://map.heifa.site/doc
Admin
A Vue.js library for integrating Baidu Maps, supporting Vue 3/Vue 2, API v2.0, v3.0, and WebGL. It...
Tokens:50,274
Snippets:83
Trust Score:3.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install vue-baidu-map-3x

Source: https://map.heifa.site/doc/begin/install

Provides installation commands for integrating vue-baidu-map-3x with Vue.js projects. Supports both Vue 3 and Vue 2 environments using npm.

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

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

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

### Context Menu Insertion Example

Source: https://map.heifa.site/doc/menu/menu

Example demonstrating how to insert a context menu into the map. This snippet is a placeholder as the actual code was not provided in the input.

```vue
// Code example for inserting a context menu is not available in the provided text.
// Please refer to the original documentation for the actual code snippet.
```

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

### Standalone Custom Overlay Example

Source: https://map.heifa.site/doc/overlay/overlay

A practical code example demonstrating the standalone usage of the BmOverlay component. It highlights the necessity of applying 'position: absolute;' CSS styling for custom overlays to function correctly within the map context.

```vue
<template>
  <baidu-map class="bm-view" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
    <bm-overlay
      ref="customOverlay"
      :pane="'floatPane'"
      @draw="drawOverlay"
      @initialize="initializeOverlay"
      :class-name="'sample-overlay'"
      :before-draw="enableAutoLocation"
    >
      <div v-show="showOverlay" :style="overlayStyle">
        Custom Overlay Content
      </div>
    </bm-overlay>
  </baidu-map>
</template>

<script>
import { BmOverlay } from 'vue-baidu-map-3x';

export default {
  components: {
    BmOverlay
  },
  data() {
    return {
      showOverlay: true,
      overlayStyle: {
        position: 'absolute',
        background: 'rgba(255, 0, 0, 0.5)',
        border: '1px solid red',
        padding: '10px',
        color: 'white',
        borderRadius: '5px'
      }
    };
  },
  methods: {
    initializeOverlay(e) {
      console.log('Overlay initialized:', e);
      // You can access BMap, map, el, overlay here
    },
    drawOverlay(e) {
      console.log('Overlay drawing:', e);
      // Logic to update overlay position or content based on map changes
      const { BMap, map, el } = e;
      const pixel = map.pointToOverlayPixel({ lng: 116.404, lat: 39.915 }); // Example point
      el.style.left = pixel.x + 'px';
      el.style.top = pixel.y + 'px';
      this.showOverlay = true;
    },
    enableAutoLocation(e) {
      // Example of a pre-draw hook
      console.log('Pre-draw hook executed');
      return true; // Continue drawing
    }
  }
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 500px;
}
.sample-overlay {
  /* Ensure custom overlays have absolute positioning */
  position: absolute;
}
</style>
```

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

### CDN Global Registration

Source: https://map.heifa.site/doc/begin/use

Provides an example of how to use the BaiduMap component via CDN, typically in a Vue 2 or older setup. It uses `Vue.use` to register the plugin globally with an application key.

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

```

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

### BmCityList Control API Documentation

Source: https://map.heifa.site/doc/control/city-list

Documentation for the BmCityList control, which allows users to switch cities on the map. It details its properties, events, and provides an example of its usage.

```APIDOC
BmCityList:
  Description: The BmCityList control displays a list of cities for selection, typically appearing when the map view is sufficiently large.
  Properties:
    anchor: ControlAnchor
      Description: The docking position of the control on the map.
      Type: ControlAnchor
    offset: Size
      Description: The offset value for positioning the control.
      Type: Size
  Events:
    changeBefore:
      Description: Triggered before the city is switched.
      Parameters: None
    changeAfter:
      Description: Triggered after the city has been successfully switched.
      Parameters: None
  Examples:
    - Title: Adding a city switch control to the top-left corner of the map.
      Code:
        // Assuming 'map' is your BMap instance and 'BmCityList' is imported
        const cityListControl = new BmCityList({
          anchor: BMAP_ANCHOR_TOP_LEFT, // Example anchor
          offset: new BMap.Size(10, 10) // Example offset
        });
        map.addControl(cityListControl);
```

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

### Lushu Component API Documentation

Source: https://map.heifa.site/doc/bmaplib/lushu

Documentation for the `bml-lushu` component, used for rendering movement trajectories on Baidu Maps. It details properties, events, and provides a structure for examples.

```APIDOC
bml-lushu Component
  Description: Used to render movement trajectories.

  Properties:
    play (Boolean): Whether to play the movement. Default: true.
    path (Array[{lng, lat}]): Array of coordinate points forming the route. Default: [].
    landmarkPois (Array[{lng, lat, html, pauseTime}]): Special points to display during overlay movement. Default: [].
    icon (Icon): The icon for the moving overlay.
    speed (Number): The movement speed of the overlay. Default: 4000.
    autoView (Boolean): Whether to automatically adjust the route view. Default: false.
    rotation (Boolean): Whether the moving object rotates according to the path. Default: false.
    infoWindow (Boolean): Whether to enable the info window on the moving object. Default: true.
    content (String): The content for the info window. If empty, the info window is not displayed.

  Events:
    start (this): Triggered when movement begins.
    stop (this): Triggered when movement stops.
    pause (this): Triggered when movement is paused.
    move (this): Triggered during movement. The parameter 'i' indicates the current index in the points array.

  Examples:
    (No specific code examples provided in the source text for Lushu component usage.)
```

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

### Basic Baidu Map Initialization

Source: https://map.heifa.site/doc/hole

Demonstrates the fundamental setup for initializing a Baidu Map component. It requires setting the center coordinates and zoom level for the map to render correctly. The map component must also have a defined height.

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

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

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

### BmNavigation API

Source: https://map.heifa.site/doc/control/navigation

Documentation for the BmNavigation component, which adds zoom and pan controls to the map. It details available properties like anchor, offset, type, showZoomInfo, and enableGeolocation, along with usage examples.

```APIDOC
BmNavigation:
  Description: Adds zoom and pan controls to the map.
  Properties:
    anchor: ControlAnchor | The anchor point for the control.
    offset: Size | The offset from the anchor point.
    type: NavigationControlType | The type of the zoom control.
    showZoomInfo: Boolean | Whether to display zoom level information.
    enableGeolocation: Boolean | false | Whether to enable geolocation functionality within the control.
  Examples:
    - Add zoom control to the top right corner.
```

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

### Heatmap API Documentation

Source: https://map.heifa.site/doc/bmaplib/heatmap

Details the BmlHeatmap component, its properties, and usage examples for creating heatmaps on Baidu Maps using vue-baidu-map-3x.

```APIDOC
BmlHeatmap:
  Properties:
    data: Array[{lng, lat, count}]
      - Description: Sets the point coordinates and weight values for the heatmap.
      - Type: Array of objects, each with 'lng' (longitude), 'lat' (latitude), and 'count' (weight).
      - Default: []
    max: Number
      - Description: The maximum weight value for the heatmap.
      - Type: Number
    radius: Number
      - Description: The radius of the heatmap points.
      - Type: Number
    gradient: Object
      - Description: Defines the gradient intervals for the heatmap. Keys are positions (0-1) and values are color strings (e.g., {5:'rgb(0, 110, 255)',.8:'rgb(100, 0, 255)'}).
      - Type: Object
    opacity: Number
      - Description: The opacity of the heatmap.
      - Type: Number
  Examples:
    - Adding a heatmap: (No specific code example provided in the source text, only a heading for it.)
```

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

### Vue Baidu Map Global Registration Example

Source: https://map.heifa.site/doc/begin/third-party

Demonstrates how to globally register a third-party component, BmlMarkerClusterer, within a Vue application. This involves importing the component and registering it with the Vue app instance.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import {BmlMarkerClusterer} from 'vue-baidu-map'

const app = createApp(App);

app.component('bml-marker-cluster', BmlMarkerClusterer)
app.mount('#app');

```

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

### Add Info Window to Map Example

Source: https://map.heifa.site/doc/overlay/info-window

Vue code snippet demonstrating how to add a BmInfoWindow to a Baidu Map, associated with a BmMarker. It shows how to manage the info window's visibility using a data property and handle open/close events.

```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>
```

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

### BmMarker API Documentation

Source: https://map.heifa.site/doc/overlay/marker

Details for the BmMarker component, including its properties, events, and usage examples for adding markers to a Baidu Map. It covers marker positioning, icons, dragging behavior, and event handling.

```APIDOC
BmMarker:
  Properties:
    position: Point | The position of the marker.
    offset: Size | The offset of the marker's position.
    icon: Icon | The icon object for the marker (refer to Baidu Maps official classes).
    massClear: Boolean (default: true) | Whether to clear this overlay when map.clearOverlays() is called.
    dragging: Boolean (default: false) | Enables marker dragging.
    clicking: Boolean (default: true) | Whether to respond to click events.
    raiseOnDrag: Boolean (default: false) | Enables a visual effect when dragging the marker.
    draggingCursor: String | The CSS cursor style when dragging the marker.
    rotation: Number | The rotation angle of the marker.
    shadow: Icon | The shadow icon for the marker.
    title: String | The content displayed when the mouse hovers over the marker.
    label: Label | A text label associated with the marker.
    animation: String | The animation effect for the marker.
    top: Boolean (default: false) | Places the marker above other markers.
    zIndex: Number (default: 0) | Sets the z-index of the overlay.

  Events:
    click: event{type, target} | Triggered when the marker icon is clicked.
    dblclick: event{type, target, point,pixel} | Triggered when the marker icon is double-clicked.
    mousedown: event{type, target, point,pixel} | Triggered when the mouse button is pressed down on the marker.
    mouseup: event{type, target, point,pixel} | Triggered when the mouse button is released on the marker.
    mouseout: event{type, target, point,pixel} | Triggered when the mouse leaves the marker area.
    mouseover: event{type, target, point,pixel} | Triggered when the mouse enters the marker icon area.
    remove: event{type, target} | Triggered when the marker is removed.
    infowindowclose: event{type, target} | Triggered when an InfoWindow on this marker is closed.
    infowindowopen: event{type, target} | Triggered when an InfoWindow on this marker is opened.
    dragstart: event{type, target} | Triggered when marker dragging starts.
    dragging: event{type, target, pixel, point} | Triggered during marker dragging.
    dragend: event{type, target, pixel, point} | Triggered when marker dragging ends.
    rightclick: event{type, target} | Triggered when the marker is right-clicked.

  Examples:
    - Add a draggable marker at the map center.
    - Add a marker with a custom icon.
    - Click a Marker to open an InfoWindow.
```

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

### Handling Map Events and InfoWindows

Source: https://map.heifa.site/doc/hole

Illustrates how to handle map events such as 'init', 'load', 'loaded', and 'ready'. It also shows a common pattern for displaying info windows associated with markers, emphasizing that only one info window can be active at a time. The example shows an 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>
```

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

### Correct Map Initialization with Ready Event

Source: https://map.heifa.site/doc/begin/use

Demonstrates the correct way to initialize map properties like center and zoom using the `ready` event. This ensures that map API calls are made only after the map has fully loaded, preventing common initialization errors.

```html
<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>

```

```javascript
<script setup>
import { ref } 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>

```

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

### Add Beijing Haidian District Boundary Example

Source: https://map.heifa.site/doc/other/boundary

Example demonstrating how to add the administrative boundary for Beijing's Haidian District to the map using the BmBoundary component.

```Vue.js
<template>
  <baidu-map class="bm-view" :center="{lng: 116.404, lat: 39.915}" :zoom="12">
    <bm-boundary :name="'北京市海淀区'" :stroke-weight="2" :stroke-color="'#0000ff'" :fill-color="'#0000ff'" :fill-opacity="0.3"></bm-boundary>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map'
import { BmBoundary } from 'vue-baidu-map'

export default {
  components: {
    BaiduMap,
    BmBoundary
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>
```

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

### Add Editable Curve Line Example

Source: https://map.heifa.site/doc/bmaplib/curve-line

Vue.js component example demonstrating how to add an editable BmlCurveLine to a Baidu Map. Includes functionality to add points dynamically and update the line based on user edits.

```vue
<template>
  <div>
    <baidu-map class="map" :center="{lng: 118.454, lat: 32.955}" :zoom="5" :scroll-wheel-zoom="true">
      <bml-curve-line :points="points" :editing="true" @lineupdate="update"></bml-curve-line>
    </baidu-map>
    <button @click="addPoint" class="md-raised md-primary">
      添加一个坐标点
    </button>
  </div>
</template>

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

const points = ref([
  { lng: 116.432045, lat: 39.910683 },
  { lng: 120.129721, lat: 30.314429 },
  { lng: 121.491121, lat: 25.127053 }
]);

const addPoint = () => {
  points.value.push({
    lng: 116.404,
    lat: 39.915
  })
};

const update = (e) => {
  points.value = e.target.cornerPoints
};
</script>

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

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

### BmContextMenu API Documentation

Source: https://map.heifa.site/doc/menu/menu

Documentation for the BmContextMenu component, detailing its properties, events, and usage for creating context menus on the map.

```APIDOC
BmContextMenu:
  Properties:
    width: Number | The width of the menu

  Events:
    open: event{type, target, point, pixel} | Triggered when the context menu opens. Parameters 'point' and 'pixel' indicate the geographical and pixel coordinates where the menu was activated.
    close: event{type, target, point, pixel} | Triggered when the context menu closes. Parameters 'point' and 'pixel' indicate the geographical and pixel coordinates where the menu was activated.

  Examples:
    Inserting a context menu into the map:
    (Code example for insertion is not provided in the input text, only a link to it.)

  Related:
    BmContextMenuItem (for menu items)
```

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

### BmInfoWindow Component API

Source: https://map.heifa.site/doc/overlay/info-window

Detailed API documentation for the BmInfoWindow component, including its properties, events, and behavior for displaying information windows on a Baidu Map. It supports dynamic resizing via MutationObserver or manual redraw.

```APIDOC
BmInfoWindow:
  Description: Information window component that uses slot mode to render child nodes. Automatically adjusts size if MutationObserver is supported, otherwise requires manual redraw() call.

  Properties:
    show (Boolean): Controls the visibility of the info window. Defaults to false.
    position (Point): The geographical coordinate where the info window points.
    width (Number): The width of the info window in pixels. Range: 0, 220 - 730. If 0, width adjusts to content.
    height (Number): The height of the info window in pixels. Range: 0, 60 - 650. If 0, height adjusts to content.
    maxWidth (Number): The maximum width of the info window in pixels when maximized. Range: 220 - 730.
    offset (Size): Offset value for the info window's position. By default, the bottom tip points to the coordinate. Can be used to adjust default positioning.
    title (String): The title text for the info window, supports HTML content.
    autoPan (Boolean): Enables automatic map panning when the info window opens. Defaults to true.
    closeOnClick (Boolean): Enables closing the info window by clicking on the map. Defaults to true.
    message (String): Custom short message content, optional. Full message includes custom part + location link. Max 140 characters.
    maximize (Boolean): Allows the info window to be maximized.

  Events:
    close (event{type, target, point}): Triggered when the info window is closed.
    open (event{type, target, point}): Triggered when the info window is opened.
    maximize (event{type, target}): Triggered after the info window is maximized.
    restore (event{type, target}): Triggered when the info window is restored from maximized state.
    clickclose (event{type, target}): Triggered when the info window's close button is clicked.

  Warning: Only one info window can exist at a time. Avoid creating them in loops without proper management. Refer to: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/infoWindow
```

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

### Set Map Type

Source: https://map.heifa.site/doc/baidu-map

Example code snippet for changing the map's display type (e.g., satellite, normal).

```javascript
// Example code for setting map type
// map.setMapType(BMAP_SATELLITE_MAP);
```

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

### BmLabel API Documentation

Source: https://map.heifa.site/doc/overlay/label

Details the properties, events, and usage examples for the BmLabel component, used for displaying text labels on the map.

```APIDOC
BmLabel:
  Properties:
    content: String - The text content of the label.
    title: String - Text displayed when the mouse hovers over the label.
    labelStyle: Object - CSS styles for the text label.
    offset: Size - The offset position of the label.
    position: Point - The geographical position of the label.
    zIndex: Number - The z-index of the label.
    massClear: Boolean - Whether to clear this overlay when map.clearOverlays() is called (defaults to true).

  Events:
    click: event{type, target, point, pixel} - Triggered when the label is clicked.
    dblclick: event{type, target, point, pixel} - Triggered when the label is double-clicked.
    mousedown: event{type, target, point, pixel} - Triggered when the mouse button is pressed down on the label.
    mouseup: event{type, target, point, pixel} - Triggered when the mouse button is released on the label.
    mouseout: event{type, target, point, pixel} - Triggered when the mouse cursor leaves the label area.
    mouseover: event{type, target, point, pixel} - Triggered when the mouse cursor enters the label area.
    remove: event{type, target} - Triggered when the label is removed.
    lineupdate: event{type, target} - Triggered when the overlay's properties change.

  Example:
    Add a red 24pt text label to the map.
    (Code example not provided in source text, only description)
```

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

### Enable Mouse Wheel Zoom

Source: https://map.heifa.site/doc/baidu-map

Example code snippet showing how to enable or disable the mouse wheel zoom functionality on the map.

```javascript
// Example code for enabling mouse wheel zoom
// map.enableScrollWheelZoom();
```

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

### Vue Baidu Map 3x & Offline Map Setup

Source: https://map.heifa.site/doc/offline-map

Illustrates the integration of vue-baidu-map-3x and vue-baidu-map-offline into a Vue application. It shows the necessary `app.use()` calls for enabling offline mode and configuring the main Baidu Map instance with an API key and version.

```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'
});

```

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

### BmWalking Component API

Source: https://map.heifa.site/doc/search/walking

API documentation for the BmWalking component, used for calculating and displaying walking routes on the map. It includes properties for defining the route search parameters and events for handling search results and map updates.

```APIDOC
BmWalking:
  Description: Component for calculating and displaying walking routes.

  Properties:
    location: (String | Point | null) - Defines the search area. Can be null (uses map center), a city name string, or a Point object. If null, search results are automatically loaded onto the map and the map viewport is adjusted.
    start: (String | Point | LocalResultPoi) - The starting point for the route. Can be a keyword string, a Point object, or a LocalResultPoi instance.
    end: (String | Point | LocalResultPoi) - The ending point for the route. Can be a keyword string, a Point object, or a LocalResultPoi instance.
    panel: (Boolean) - Whether to display the search results panel. Defaults to true.
    autoViewport: (Boolean) - Whether to automatically adjust the map viewport after the search. Defaults to true.
    selectFirstResult: (Boolean) - Whether to select the first search result. Defaults to false.

  Events:
    markersset: ({pois: Array}) - Callback function after markers are added to the map.
    infohtmlset: ({poi: LocalResultPoi, html: HTMLElement}) - Callback function after the marker info window HTML is created.
    resultshtmlset: ({container: HTMLElement}) - Callback function after the results list HTML is added.
    searchcomplete: ({results: WalkingRouteResult}) - Callback function when the search is completed. For multi-keyword searches, it returns an array of LocalResult objects.
    polylinesset: ({routes: Array}) - Callback function after polylines representing the routes are added to the map.

  Example Usage:
    // Example: Search for a walking route from '百度大厦' to '北京邮电大学西门'
    // <bm-walking start='百度大厦' end='北京邮电大学西门' :panel='true' @searchcomplete='onSearchComplete'></bm-walking>
    //
    // onSearchComplete(results) {
    //   console.log('Walking route search complete:', results);
    // }
```

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

### Set Latitude/Longitude and Zoom Level

Source: https://map.heifa.site/doc/baidu-map

Example code snippet demonstrating how to set the initial geographical coordinates and zoom level for the map.

```javascript
// Example code for setting map center and zoom level
// map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
```

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

### useMap Hook

Source: https://map.heifa.site/doc/util/hooks

Provides a hook to asynchronously get the BMap map object. This is essential for interacting with the Baidu Maps API after the map instance is ready.

```javascript
import { useMap } from 'vue-baidu-map-3x';

useMap().then(BMap => {
    console.log(BMap);
});
```
Tokens:
Raw