Skjölun / Grunnatriði / Merki

Merki

Merki er einn stöðuhlutur settur inn í kortasýnina. Teiknivél SDK-sins sér um teiknunina og skiptir um aðferð eftir fjölda: upp í 2.000 merki notar hún innbyggð merki hvers korta-SDK sjálfgefið og teiknar rasterflísar umfram það — þröskuld sem þú getur breytt með því að rétta kortasýninni markerTilingOptions.

ANDROID

com.mapconductor:core

iOS

MapConductorCore

REACT

@mapconductor/js-sdk-react

Skoða sýnidæmiMerkistákn · React ↗

Vettvangur

01 · Staða merkis

MarkerState stendur fyrir eitt merki — staðsetningu, tákn, atburði og hvaða gögn sem er. Úthlutun á eigind tekur gildi samstundis, og engin gerð er bundin þjónustuaðila.

MarkerState · Jetpack Compose

val marker =
    MarkerState(
        position = GeoPoint.fromLatLong(21.3069, -157.8583),
        icon = DefaultMarkerIcon(fillColor = Color.Red, label = "A"),
        extra = postOffice,
        onClick = { clicked -> viewModel.onMarkerClick(clicked) },
    )

// Assigning to a property is all it takes to redraw
marker.position = nextPoint

MarkerState · SwiftUI

let marker = MarkerState(
    position: GeoPoint.fromLatLong(latitude: 21.3069, longitude: -157.8583),
    icon: DefaultMarkerIcon(fillColor: .red, label: "A"),
    extra: postOffice,
    onClick: { clicked in viewModel.onMarkerClick(clicked) }
)

content.markers = markerStates.map { Marker(state: $0) }

MarkerIconsPage.tsx

const marker = createMarkerState({
  id: 'post-office-1',
  position: createGeoPoint({ latitude: 21.3069, longitude: -157.8583 }),
  icon: new ColorDefaultIcon({ fillColor: '#e74c3c', label: 'A' }),
  extra: postOffice,
  onClick: setSelected,
});

<Markers states={markerStates} />

Eigind

Lýsing

position

Breidd og lengd; úthlutaðu til að færa merkið.

icon

Táknið. Fellur aftur á sjálfgefnu næluna.

extra

Hvaða gögn sem er, skilað til baka við smell fyrir upplýsingablöðrur og þess háttar.

clickable / draggable

Hvort merkið sé snertanlegt og hvort megi draga það.

zIndex

Röð í stafla; ósett (null) á hvert merki sjálfgefið á öllum þremur vettvöngunum, og þá staflast merkin eftir breiddargráðu. Merkjalagið sjálft situr á 10.

onClick / onDrag…

Stjórar fyrir snertingu, drátt og upphaf/lok hreyfingar.

02 · Tákn

Frá litaðri, merktri sjálfgefinni nælu upp í myndir, teiknifleti og blöðrulaga tákn. Hvert tákn lítur eins út hjá öllum þjónustuaðilum.

03 · Innri teiknivélin

Teiknunin er falin innri teiknivél SDK-sins. Á meðan fjöldinn er lágur notar hún innbyggð merki hvers korta-SDK og heldur innbyggðri smellprófun og hreyfingum.

Fram yfir 2.000 merki skiptir vélin um aðferð: hún teiknar merkin inn í flísamyndir og leggur þær yfir sem rasterlag, sem fjarlægir kostnaðinn við að bæta við og uppfæra hvert merki í innbyggða SDK-inu. Kóðinn þinn breytist ekki.

Mynd · aðferðin skiptist eftir fjölda merkja

≤ 2,000

Innbyggð merki

Eitt innbyggt merki fyrir hverja stöðu. Snerting, dráttur og hreyfing haga sér nákvæmlega eins og vettvangurinn gerir.

2,000+

> 2,000

Rasterflísar

Merkin eru teiknuð inn í flísar og lögð yfir sem rasterlag. Þar sem ekkert er uppfært merki fyrir merki helst myndavélin lipur við tugþúsundir.

Skiptin gerist sjálfkrafa. Þröskuldurinn er sjálfgefið 2.000: gefðu kortasýninni valkostina (markerTiling á Android, markerTilingOptions á iOS og React) til að breyta minMarkerCount, og sömu valkostir bera flísaskyndiminnið og stærð tákna eftir aðdrætti. Disabled heldur innbyggðu merkjunum, sama hve mörg þau eru.

Sýnidæmi á myndbandi · flísateiknun merkja

Sýnidæmi · öll 24.526 merkin á skjánum í einu

minMarkerCount

2000 · stillanlegt

cacheSize

8 MB

enabled

true

debugTileOverlay

false

PostOfficeViewModel.kt · 24.526 merki

// On by default; pass it to the map view to change the threshold
// (the Android parameter is called markerTiling)
val markerTiling =
    MarkerTilingOptions.Default.copy(
        minMarkerCount = 500, // switch to tile rendering from 500 markers
        iconScaleCallback = { _, zoom ->
            if (zoom > 10) 0.8 else if (zoom > 5) 0.5 else 0.2
        },
    )

GoogleMapView(state = mapViewState, markerTiling = markerTiling) { /* markers */ }

// Disable it to keep native markers at any count
val plain = MarkerTilingOptions.Disabled

PostOfficeMapComponent.swift · 24.526 merki

var content = MapViewContent()
content.markerTilingOptions = MarkerTilingOptions(
    minMarkerCount: 500, // switch to tile rendering from 500 markers
    iconScaleCallback: { _, zoom in
        PostOfficeViewModel.iconScale(zoom: zoom)
    }
)
content.markers = markers.map { Marker(state: $0) }

PostOfficePage.tsx · 24.526 merki

const MARKER_TILING_OPTIONS: MarkerTilingOptions = {
  ...MarkerTilingOptions.Default,
  minMarkerCount: 500, // switch to tile rendering from 500 markers
  iconScaleCallback: (_state, zoom) => (zoom > 10 ? 0.8 : zoom > 5 ? 0.5 : 0.2),
};

<PostOfficeMapProvider markerTilingOptions={MARKER_TILING_OPTIONS}>
  <Markers states={markerStates} />
</PostOfficeMapProvider>

04 · Hreyfingar

Lítið safn hreyfinga fylgir SDK-inu. Veldu eina við gerð eða kallaðu á animate() síðar; upphaf og lok berast gegnum stjóra.

AnimationPageViewModel.kt

// Set one at creation, or call animate() later
MarkerState(position = point, animation = MarkerAnimation.Bounce)

override fun onMarkerClick(clicked: MarkerState) {
    clicked.animate(clicked.extra as? MarkerAnimation)
}

AnimationPageViewModel.swift

if let animation = clicked.extra as? MarkerAnimation {
    clicked.animate(animation)
}

MarkerAnimationPage.tsx

const marker = createMarkerState({
  id: 'animated-marker',
  position: HONOLULU,
  animation,
  onClick: state => state.animate(MarkerAnimation.Bounce),
});

Merki á hreyfingu eru teiknuð á sérstöku yfirlagi, svo þau hreyfast jafnvel meðan flísateiknun er virk. Lengdin er stillanleg í stillingum SDK-sins.

Merki

01 · Staða merkis

02 · Tákn

03 · Innri teiknivélin

Innbyggð merki

Rasterflísar

04 · Hreyfingar

Tengdar síður

Merki í miklum mæli

Upplýsingablaðra

Rasterlag