Implementing a Simple Direction Animation with Vue3

This is an interesting requirement I recently encountered, where we need to display location markers (map pins) on a map based on data returned from the backend. Precision isn’t crucial; we just need to approximate the directions.

The effect is somewhat similar to map markers in games.

Design Approach

Considering we don’t need high precision, we’ll use the simplest method of div + css to display and animate the location markers, and ensure basic functionality with a background image.

There are a total of 9 directions, including north, south, east, west, and the four corners. We’ll arrange them in a 3 * 3 grid layout. The location markers only need to appear within the corresponding div.

Finally, we’ll wrap these directions in a single div and set the background of the outer div to achieve the desired effect.

Code Implementation and Demo

Once we’ve outlined the concept, the code implementation is relatively straightforward. We’ve created a demo using Vue3 on CodeSandbox. Since the code is fairly simple, we won’t elaborate further here.

You can observe the changes in the location markers by selecting the corresponding directions.

Expansion

In this implementation, achieving a decent effect largely depends on the suitability of the background image. Factors such as image size and margins will affect the final result. For irregular terrains, using SVG or Canvas might yield better results, although it would increase code complexity.

Apart from directional markers, similar implementations can be extended to other scenarios such as seat indicators inside train carriages or parking space markers in parking lots.

(Translated by ChatGPT)