世界地图

显示可定制的世界地图，具有动画弧线和地理点的脉冲效果。

API

Prop 名称	类型	默认值	描述
`dots`	`Array<{ start: { lat: number; lng: number; label?: string }, end: { lat: number; lng: number; label?: string } }>`	`[]`	Array of dot objects, each containing a start and end coordinate (latitude, longitude).
`class`	`string`	`""`	Additional CSS classes for custom styling.
`lineColor`	`string`	`"#0EA5E9"`	Color of the arcs and dot borders.
`mapColor`	`string`	—	Main color of the dotted map. (Required)
`mapBgColor`	`string`	—	Background color of the map. (Required)

注意: This component uses Spline & requires dotted-map npm package as a dependency.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/world-map.json"

npm

pnpm

bun

yarn

npm install dotted-map

You can 复制并粘贴以下代码： to create this component:

WorldMap.vue

Animated Arcs: Smooth arcs between two geographical points using an SVG path.
Dotted Background: Renders a dotted map using the DottedMap library.
Pulsing Markers: Each point animates with expanding circles to highlight the location.
Dynamic Projection: Projects latitude/longitude to an 800x400 coordinate plane.
Customizable Colors: Control lineColor, mapColor, and mapBgColor.

本页