@craft-native / ts-maps
制作SDK绑定 ts-maps 交互式地图运行时。
的TypeScript端 MapProvider.ts_maps 在Craft的Zig核心。
它的 MapView 拥有一个DOM容器，并在浏览器或
WebView，没有API键。它不是STX原生的 Map 组件。
对于一个完全本地的STX屏幕，使用 Map， MapMarker, MapPolyline.
Craft使用MapKit在iOS和配置的原生Android地图上渲染它们
提供者。安卓的 mapProvider: 'maplibre' 选择一个无键的本地GL视图；
它不挂载这个包的DOM适配器。
安装
bun add @craft-native/ts-maps
快速启动
import { createMapView, defaultMapConfiguration, tsMapsProvider } from '@craft-native/ts-maps'
const view = createMapView({
configuration: { ...defaultMapConfiguration, provider: tsMapsProvider },
initialCamera: {
center: { latitude: 37.7749, longitude: -122.4194 },
zoom: 12,
pitch: 0,
heading: 0,
},
markers: [
{
id: 1,
coordinate: { latitude: 37.7749, longitude: -122.4194 },
title: 'San Francisco',
subtitle: null,
color: 'red',
is_draggable: false,
is_selected: false,
custom_icon: null,
anchor_x: 0.5,
anchor_y: 1,
},
],
onTap: (coord) => console.log('tapped', coord),
onMarkerTap: (id, coord) => console.log('marker', id, coord),
})
document.body.appendChild(view.container)
API概述
| 出口 | 它是什么？ |
|---|---|
createMapView(props) | 工厂返回 MapViewInstance 与 id， container， map，以及命令式方法(setCamera， addMarker， fitToMarkers,……)。 |
MapViewProps / MapViewInstance | 组件的类型。 |
Coordinate， MapRegion， MapCamera， MapMarker,…… | 中的结构体的镜像 packages/zig/src/maps.zig． 字段名完全匹配，因此JSON往返是免费的。 |
craftCoordToLatLng， latLngToCraftCoord， craftRegionToBounds， craftCameraToOptions， craftMarkerToMarker,…… | Craft和ts-map类型之间的纯适配器函数。 |
tsMapsProvider | 常数 'ts_maps' 匹配枚举标记的。 |
从 ts-maps | TsMap， LatLng， Marker， Polyline， marker()， tileLayer()等都是再出口的，所以你只需要一次进口。 |
桥的协议
当在Craft WebView中运行时， createMapView 将自身注册为 getBridge() 并监听中声明的方法 ./bridge-protocol：
setCamera，setRegion，addMarker，removeMarker，addPolyline，addPolygon，addCircle，fitToMarkers，selectMarker，deselectAll，setConfiguration.
它返回这些事件：
map:tap，map:markerTap，map:regionChanged，map:cameraChanged.
如果没有桥接可用（仅限浏览器、测试等），组件就会静默地退回到仅限本地的行为——通过props传递的事件回调仍然会触发。
开发
bun run typecheck
bun test
bunx --bun pickier .