Skjölun / Uppsetning / React / Azure Maps

Uppsetning á Azure Maps

Hvernig nota má Azure Maps á vefnum gegnum MapConductor, auðkennt með áskriftarlykli Azure.

PACKAGE

react-for-azuremaps

API KEY

Áskriftarlykill

CSS

Nauðsynlegt

REACT NATIVE

ekkert

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra

Azure Maps-aðgangur og áskriftarlykill

STEP 01

Settu upp

azure-maps-control fylgir pakkanum.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-azuremaps

STEP 02

Fluttu inn stílblaðið

Fluttu hana inn einu sinni úr inngangsskrá forritsins. Gleymist það kemur umbrot kortsins og stýringar rangt út.

main.tsxTypeScript

import '@mapconductor/react-for-azuremaps/style.css';

STEP 03

Sendu áskriftarlykilinn

Lykillinn fer í subscriptionKey á stöðu-hookinu. Sé hann tómur frumstillist kortið aldrei.

AzureMap.tsxTypeScript · React

const state = useAzureMapsViewState({
  subscriptionKey: import.meta.env.VITE_AZURE_MAPS_SUBSCRIPTION_KEY ?? '',
  mapDesignType: AzureMapsDesign.Road,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

VARÚÐ

Sendu lykilinn úr umhverfisbreytu við smíði (import.meta.env.VITE_* í Vite) og haltu honum utan við útgáfustýringu. Hann berst í vafrann hvort eð er, svo takmarkaðu hann alltaf eftir tilvísanda eða léni svo það sé meinlaust þótt hann sjáist.

STAÐFESTA

Það sem þú ættir að sjá

Uppsetningunni er lokið þegar Azure Maps-kortið teiknast.

AzureMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { AzureMapsDesign, AzureMapsMapView, useAzureMapsViewState } from '@mapconductor/react-for-azuremaps';
import '@mapconductor/react-for-azuremaps/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function AzureMap() {
  const state = useAzureMapsViewState({
    subscriptionKey: import.meta.env.VITE_AZURE_MAPS_SUBSCRIPTION_KEY ?? '',
    mapDesignType: AzureMapsDesign.Road,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <AzureMapsMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </AzureMapsMapView>
  );
}

Kortahönnun

AzureMapsDesign varpast á stíla Azure Maps.

AzureMapsDesign

Notes

Road / RoadShadedRelief

Vegakortið, óbreytt og með skyggðu landslagi

Satellite / SatelliteRoadLabels

Gervihnattamyndir, með eða án merkinga

GrayscaleLight / GrayscaleDark

Bakgrunnar fyrir þín eigin gögn

Night

Næturstíllinn

HighContrastLight / HighContrastDark

Stílar með miklum birtuskilum

Blank / BlankAccessible

Engar grunnkortaflísar

Bilanaleit

Kortið birtist ekki

Athugaðu að subscriptionKey sé ekki tómur strengur.
Staðfestu að lykillinn sé virkur í Azure-gáttinni.

Kortið frumstillist tvisvar í þróun

React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.

Næst

Áskriftarlykillinn berst í vafrann. Í raunnotkun skaltu takmarka svið hans eða færa þig yfir í eina af hinum auðkenningarleiðum Azure.