A TMap Utility for AMap in Vue 3: Markers, Areas, Loca Pulse Lines, and Vue-Powered InfoWindows

AMap projects get a cleaner way to manage overlays and InfoWindows without leaving Vue's reactivity model. The pre-rendered DOM approach keeps the Vue context intact, avoiding the common pain of re-creating component instances inside map popups.

A Vue 3 + TypeScript utility class named TMap wraps the AMap JS API 2.0 and Loca 2.0 into a single set of methods. It covers map initialization, style and center control, markers (single, batch, drag, icon changes), polygons (render, draw, edit), polylines, Loca pulse line layers, point clustering, administrative district masks, and InfoWindows. The wrapper converts business data structures into AMap and GeoJSON formats internally, so page code only passes plain objects and callbacks.

The most notable part is how InfoWindows interact with Vue. The recommended path is to render a Vue component in the parent template, take its DOM element, and hand that to AMap.InfoWindow. Since Vue still owns the component, reactivity, Pinia, Router, and styles work normally. An alternative dynamic path uses createApp to mount a new component at runtime, but that requires installing plugins and explicitly unmounting to avoid memory leaks. The article also shows how Loca's PulseLineLayer demands GeoJSON FeatureCollection input, and how the administrative district mask builds a polygon with an outer rectangle and holes.