Map

交互式地图：基于 Leaflet.js，支持标记点、弹窗、图层切换与缩放控制。

最后更新 2026-10-25 19:27:08

说明

Markers 给标记点列表即可，组件自动渲染——默认高德地图街道图，支持切换高德卫星图；未给 Markers 时用内置示例兜底，宿主零数据也能跑通全流程。JS 侧由 known.map 驱动，Leaflet 1.9.4 以 CDN 方式惰性注入，不看地图的宿主零加载成本。底部工具条可放大、缩小、定位到中心、切换卫星图；标记点点击通过 OnMarkerClick 回调交回宿主。两条边界：渲染依赖 Leaflet，CDN 不可用时组件降级为提示；大量标记点（>1000）时建议使用标记点聚类插件，本组件未内置，这类场景需宿主自行扩展。

常见能力：

Leaflet.js 1.9.4
高德地图街道图
高德卫星图切换
标记点与弹窗
缩放控制
定位到中心
标记点点击回调
CDN 惰性加载
内置示例兜底

用法

<Map Markers="@markers" Height="400px" />

@* 没有数据：用内置示例兜底 *@
<Map Height="400px" OnMarkerClick="@OnMarker" />

@* 切换卫星图 *@
<Map Markers="@data" EnableLayerSwitch="true" />

API 参数

参数	类型	默认值	说明
`CenterLat`	`double`	`39.9042`	地图中心纬度。
`CenterLng`	`double`	`116.4074`	地图中心经度。
`EnableLayerSwitch`	`bool`	`true`	是否显示卫星图切换按钮。
`Height`	`string`	`"400px"`	画布高度，如 400px；宽度跟随容器。
`Id`	`string`	`null`	地图 DOM id，留空自动生成。同页多个地图时可用于 JS 侧定向取用。
`Markers`	`List<MapMarker>`	`null`	地图标记点列表；留空则渲染内置示例。
`OnMarkerClick`	`EventCallback<string>`	—	事件标记点点击回调。
`ShowToolbar`	`bool`	`true`	是否显示工具条（放大 / 缩小 / 定位 / 图层切换）。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Zoom`	`int`	`10`	地图初始缩放级别（1-18）。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。