这是最近遇到的一个有点意思的需要，须要依据后端返回的数据，在一块地图的具体的方位上显示对应地位标识（地位图钉）。不必非常准确，只有能体现出大抵的方位即可。
相似上面的成果，有点像游戏里的地图标识。
设计思路
因为不必非常准确，就用最简略的 div + css 来实现地位标识的显示和动画。之后再通过配合背景图片来保障最根底的成果。
方位总共 9 个，东南西北中加上四个角，通过 Grid 布局让其造成 3 * 3 的格子。地位标识只须要依据方位数据呈现在对应的 div 中即可。
最初将这些方位用一个 div 包裹起来，只有设置外层 div 的背景即可实现。
代码实现和 Demo 演示
梳理清思路后，代码实现就比较简单了。这里用 Vue3 在 CodeSandbox 因为这里无奈渲染，放上链接和局部代码。也能够在我的博客上看到 Demo。
Demo 地址：https://codesandbox.io/p/devbox/simple-direction-animation-de...
局部要害代码：
<template> <!-- 九宫格局部 --> <div class="display"> <div class="direction-container"> <div v-for="direction in directions" :key="direction.value" class="item"> <div v-if="selectedDirection === direction.value" class="pin"></div> </div> </div> </div> <!-- 下拉框 --></template><script setup>import { ref } from "vue";const directions = [ { name: "north-west", value: "nw" }, { name: "north", value: "n" }, { name: "north-east", value: "ne" }, { name: "west", value: "w" }, { name: "center", value: "c" }, { name: "east", value: "e" }, { name: "south-west", value: "sw" }, { name: "south", value: "s" }, { name: "south-east", value: "se" },];const selectedDirection = ref(directions[0].value);</script><style scoped>/* 抖动动画 */@keyframes shake { 0% { transform: translateY(0); } 100% { transform: translateY(10px); }}.direction-container { ... /* 3*3 grid 布局 */ display: grid; grid-template-columns: repeat(3, 1fr); ...}.item { ...}.pin { /*坐标动画和地位*/ ... animation: shake 0.5s ease infinite alternate;}</style>拓展
在这个实现下，要取得不错的成果次要依赖背景图片是否适合，图片大小、边缘留白等都会影响最终的成果。如果是针对不规则的地形组合，可能用 SVG 或 Canvas 来实现更好，但绝对的代码复杂度也会回升。
除了方位标识，相似的实现也能够拓展到其余场景，比方车厢内的座位标识，停车场的车位标识等。
本文由mdnice多平台公布