跳到主要内容

地图

用于显示带有各种图层的地图。

打包

要构建使用 Map 控件的 Flet 应用程序,请在 flet build 命令中添加 --include-packages flet_map,例如:

flet build apk --include-packages flet_map

示例

实时示例

示例

import random
import flet as ft
import flet.map as map


def main(page: ft.Page):
marker_layer_ref = ft.Ref[map.MarkerLayer]()
circle_layer_ref = ft.Ref[map.CircleLayer]()

def handle_tap(e: map.MapTapEvent):
print(e)
if e.name == "tap":
marker_layer_ref.current.markers.append(
map.Marker(
content=ft.Icon(
ft.icons.LOCATION_ON, color=ft.cupertino_colors.DESTRUCTIVE_RED
),
coordinates=e.coordinates,
)
)
elif e.name == "secondary_tap":
circle_layer_ref.current.circles.append(
map.CircleMarker(
radius=random.randint(5, 10),
coordinates=e.coordinates,
color=ft.colors.random_color(),
border_color=ft.colors.random_color(),
border_stroke_width=4,
)
)
page.update()

def handle_event(e: map.MapEvent):
print(e)

page.add(
ft.Text("Click anywhere to add a Marker, right-click to add a CircleMarker."),
map.Map(
expand=True,
initial_center=map.MapLatitudeLongitude(15, 10),
initial_zoom=4.2,
interaction_configuration=map.MapInteractionConfiguration(
flags=map.MapInteractiveFlag.ALL
),
on_init=lambda e: print(f"Initialized Map"),
on_tap=handle_tap,
on_secondary_tap=handle_tap,
on_long_press=handle_tap,
on_event=lambda e: print(e),
layers=[
map.TileLayer(
url_template="https://tile.openstreetmap.org/{z}/{x}/{y}.png",
on_image_error=lambda e: print("TileLayer Error"),
),
map.RichAttribution(
attributions=[
map.TextSourceAttribution(
text="OpenStreetMap Contributors",
on_click=lambda e: e.page.launch_url(
"https://openstreetmap.org/copyright"
),
),
map.TextSourceAttribution(
text="Flet",
on_click=lambda e: e.page.launch_url("https://flet.dev"),
),
]
),
map.SimpleAttribution(
text="Flet",
alignment=ft.alignment.top_right,
on_click=lambda e: print("Clicked SimpleAttribution"),
),
map.MarkerLayer(
ref=marker_layer_ref,
markers=[
map.Marker(
content=ft.Icon(ft.icons.LOCATION_ON),
coordinates=map.MapLatitudeLongitude(30, 15),
),
map.Marker(
content=ft.Icon(ft.icons.LOCATION_ON),
coordinates=map.MapLatitudeLongitude(10, 10),
),
map.Marker(
content=ft.Icon(ft.icons.LOCATION_ON),
coordinates=map.MapLatitudeLongitude(25, 45),
),
],
),
map.CircleLayer(
ref=circle_layer_ref,
circles=[
map.CircleMarker(
radius=10,
coordinates=map.MapLatitudeLongitude(16, 24),
color=ft.colors.RED,
border_color=ft.colors.BLUE,
border_stroke_width=4,
),
],
),
map.PolygonLayer(
polygons=[
map.PolygonMarker(
label="Popular Touristic Area",
label_text_style=ft.TextStyle(
color=ft.colors.BLACK,
size=15,
weight=ft.FontWeight.BOLD,
),
color=ft.colors.with_opacity(0.3, ft.colors.BLUE),
coordinates=[
map.MapLatitudeLongitude(10, 10),
map.MapLatitudeLongitude(30, 15),
map.MapLatitudeLongitude(25, 45),
],
),
],
),
map.PolylineLayer(
polylines=[
map.PolylineMarker(
border_stroke_width=3,
border_color=ft.colors.RED,
gradient_colors=[ft.colors.BLACK, ft.colors.BLACK],
color=ft.colors.with_opacity(0.6, ft.colors.GREEN),
coordinates=[
map.MapLatitudeLongitude(10, 10),
map.MapLatitudeLongitude(30, 15),
map.MapLatitudeLongitude(25, 45),
],
),
],
),
],
),
)


ft.app(main)

属性

bgcolor

背景颜色。

initial_center

地图的初始中心。

值的类型为 MapLatitudeLongitude

initial_rotation

初始旋转值。

initial_zoom

初始缩放级别。

interaction_configuration

交互配置。

值的类型为 MapInteractionConfiguration

keep_alive

一个布尔值,用于保持地图处于活动状态。

max_zoom

最大缩放级别。

min_zoom

最小缩放级别。

layers

要在地图上显示的图层列表。

值的类型为 MapLayer

事件

on_event

当发生任何地图事件时触发。

事件处理程序参数的类型为 MapEvent

on_hover

当发生悬停事件时触发。

事件处理程序参数的类型为 MapHoverEvent

on_init

当地图初始化时触发。

on_long_press

当发生长按事件时触发。

事件处理程序参数的类型为 MapTapEvent

on_position_change

当地图位置改变时触发。

事件处理程序参数的类型为 MapPositionChangeEvent

on_pointer_down

当发生指针按下事件时触发。

事件处理程序参数的类型为 MapPointerEvent

on_pointer_cancel

当发生指针取消事件时触发。

事件处理程序参数的类型为 MapPointerEvent

on_pointer_up

当发生指针抬起事件时触发。

事件处理程序参数的类型为 MapPointerEvent

on_secondary_tap

当发生二次点击事件时触发。

事件处理程序参数的类型为 MapTapEvent

on_tap

当发生点击事件时触发。

事件处理程序参数的类型为 MapTapEvent

方法

rotate_from

将当前旋转角度增加 degree

它具有以下参数:

  • animation_curve:缩放动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • degree:要旋转的角度。

reset_rotation

将旋转重置为 0 度。

它具有以下参数:

  • animation_curve:缩放动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:缩放动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration

zoom_in

将当前缩放级别增加一级。

它具有以下参数:

  • animation_curve:缩放动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:缩放动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration

zoom_out

将当前缩放级别降低一级。

它具有以下参数:

  • animation_curve:缩放动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:缩放动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration

zoom_to

缩放到特定级别。

它具有以下参数:

  • animation_curve:缩放动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:缩放动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration
  • zoom:要缩放到的缩放级别。

move_to

移动到特定位置。

它具有以下参数:

  • animation_curve:移动动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:移动动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration
  • destination:要移动到的目标点。值的类型为 MapLatitudeLongitude
  • zoom:要移动到的缩放级别。
  • offset:要移动到的偏移量。值的类型为 OffsetValue
  • rotation:要移动到的旋转角度。

center_on

将地图中心对准特定位置。

它具有以下参数:

  • animation_curve:移动动画的曲线。值的类型为 AnimationCurve,默认为 Map.animation_curve
  • animation_duration:移动动画的持续时间。值的类型为 DurationValue,默认为 Map.animation_duration
  • point:要对准的点。值的类型为 MapLatitudeLongitude
  • zoom:要移动到的缩放级别。