自訂基本標記

選取平台: Android iOS JavaScript

舊金山地圖,標記採用自訂樣式

您可以設定 PinStyle 物件,自訂標記的外觀。PinStyle 型別提供多種選項,可變更背景和邊框顏色、字形文字和顏色、海拔高度、要使用的圖片,以及其他選項,進一步自訂。

下列程式碼範例說明如何建立新標記,並使用部分可用的自訂選項設定樣式:

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

本頁說明如何透過下列方式自訂標記:

縮放標記

如要縮放標記,請使用 scale 選項:

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

變更背景顏色

使用 PinElement.background 選項即可變更標記的背景顏色:

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

變更邊框顏色

使用 markerOptions.borderColor 選項即可變更標記的邊框顏色:

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

在字形中新增文字

使用 markerOptions.glyph 方法,將預設字形替換為文字字元。標記的文字字形會隨著標記縮放:

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green)) {
        Text("D") // Adds text inside the marker glyph
    }
  )
}