Implementing Custom Map Points and Trajectories with Vue3 and AMap JS API

The author, a front‑end engineer, recounts encountering a map‑related requirement for the first time after years in the industry and decides to rebuild the feature with Vue3 instead of the legacy Vue2 codebase.

Business focus points are identified as points, lines, and areas, further divided into externally added elements (e.g., markers, trajectories) and map‑intrinsic elements (e.g., POIs). Two configurable map options— features and mapStyle —are suggested to improve visibility of added elements.

Choosing point‑drawing methods :

JS API: MarkerCluster , IndexCluster , Marker , CircleMarker , ElasticMarker , LabelMarker , MassMarker , etc.

JS API UI library: SimpleMarker , AwesomeMarker , SvgMarker , PointSimplifier .

After evaluating performance for >10k points, the author narrows the candidates to MarkerCluster , IndexCluster , and PointSimplifier , comparing rendering speed, custom‑style support, and clustering logic in a table.

Implementing custom markers with Vue components :

import MyComponent from './MyComponent.vue'
// This does NOT work directly with Marker.content
new Marker({ content: MyComponent })

To use a Vue component as a marker, the component is mounted to a temporary div and the resulting HTML is passed to the AMap Marker :

import { createApp } from 'vue'
const app = createApp(MyComponent)
const div = document.createElement('div')
app.mount(div)
const marker = new Marker({ content: div })

Important hook logic is highlighted: unmount the app when the marker is removed, and store point data, drawing method, and removal callback together.

Choosing line‑drawing methods :

JS API: Polyline , BesizerCurve

JS API UI library: PathSimplifier (trajectory display)

The author prefers PathSimplifier for its performance, smoothness, point‑recognition, and built‑in cruising features.

Loading optimization :

Instead of a single full‑screen spinner, the article proposes granular loading components (spinners or skeleton screens) for each data source (KeyPoint, SubPoint, etc.) and a lightweight loading‑box that appears only when any source is loading. Debounce is recommended to avoid flickering.

Code examples illustrate how to manage loading state with Vue’s ref , watch , and a global state hook:

const loading = ref(false)
watch([loading, otherLoading], () => {
  // show or hide loading‑box
})

By splitting loading areas, the user experience improves: the map remains interactive while background data loads, and the overall “non‑interactive” time is reduced to the sum of individual loading intervals rather than the longest one.

In conclusion, the author reflects on the practical refactor, emphasizing that even small loading‑optimisation changes can dramatically enhance perceived performance without altering core business logic.