vue-baidu-map-3x

The vue-baidu-map-3x library is a Vue 3 component wrapper for Baidu Maps, optimized with Vite. It provides support for multiple Baidu Map versions and rendering modes, allowing for deep customization by exposing the underlying map instances.

Key features include:

• Multiple API Support: Compatible with Baidu Map API 2.0 and the latest API 3.0.
• WebGL Support: Enables 3D map rendering via WebGL.
• Vite Optimized: Built using Vue and Vite for fast development and optimized builds.
• Deep Customization: You can export and use the original BMap class and the map instance (map) for advanced configuration.
• Rich Component Ecosystem: Includes a variety of common map components and utility tools.

::: danger Legacy utility functions (getAddressByPoints, getPointByAddress, getPointsTransfer) only work with old server-side AKs. They are not compatible with browser AKs or new server-side AKs.

For modern AKs, please use the useGeocoder hook instead. :::

BmInfoWindow is used to display information windows on the map. It uses the Vue slot pattern to render its content.

Important Constraint: Only one BmInfoWindow can exist on the map at a time. Do not place bm-info-window inside a v-for loop. Instead, use a single instance and update its properties (like position and show) dynamically.

Resizing Behavior:

• If your browser supports MutationObserver, the window will automatically adjust its size when child nodes are updated.
• If MutationObserver is not supported, you must manually call the redraw() method on the BmInfoWindow component instance after updating its content to refresh the view.

<bm-info-window :show="infoWindow.show" :position="{lng: 116.404, lat: 39.915}" title="Title">
  <p>Window Content</p>
</bm-info-window>

The BaiduMap component is the root component for all map-related components in this library. It acts as a container that mounts the core Baidu Map class and a map instance. It renders as an empty DOM node where you can mount other components like BmScale or custom DOM elements.

For advanced manual control or secondary development, you can use the ready event to access the returned BMap class and the map instance.

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

Because the Baidu Maps JS API is loaded asynchronously via JSONP, the BaiduMap component and its children are not immediately available.

Do not attempt to access the BMap class or modify the model layer during standard Vue lifecycle hooks (like onMounted). Instead, use the @ready event to execute code after the map API has finished loading. The @ready event provides an object containing {BMap, map}.

<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}) => {
  // The map is now ready. You can safely use BMap or map.
  console.log(BMap, map);
  center.value.lng = 116.404;
  center.value.lat = 39.915;
  zoom.value = 15;
}
</script>

The BmlMarkerClusterer component is used to aggregate multiple BmMarker components into clusters. This helps manage map performance and visual clarity when displaying a large number of markers. You wrap your bm-marker components inside a bml-marker-clusterer component within a baidu-map instance.

<baidu-map center="中国">
  <bml-marker-clusterer :averageCenter="true" :styles="styles">
    <bm-marker v-for="marker in markers" :key="marker.id" :position="marker.position" />
  </bml-marker-clusterer>
</baidu-map>

The BmOverlay component is a highly customizable component used to create custom overlays on the map. It relies on the draw event to trigger re-rendering of the overlay view whenever the map changes (e.g., panning or zooming).

Key Concepts:

• Redrawing: The draw method is automatically triggered by map changes. You should implement your positioning logic inside the draw event handler.
• Data Synchronization: If you need to update the data view manually (outside of map changes), you must call the reload instance method on the BmOverlay component.
• Styling Requirement: Custom overlays must have position: absolute; defined in their CSS to be positioned correctly on the map canvas.

The BmTransit component is used to plan bus/transit routes between a starting point and an ending point. You can specify locations using keywords, coordinates (Point), or LocalResultPoi instances.

Key features include:

• Automatic viewport adjustment via autoViewport.
• Displaying results in a panel via panel.
• Customizing search results per page via pageCapacity.
• Handling search completion and marker events via component events.

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

Be aware of the difference in coordinate object keys depending on the map type used:

• WebGL Maps: Use latlng format.
• API Maps: Use point format.

The BmLocalSearch component allows you to perform local searches for points of interest (POIs) based on keywords and specific geographic constraints. You can search within a city, at a specific coordinate, or within defined rectangular (bounds) or circular (nearby) areas.

<bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>