MapConductorUppsetning á Google Maps
Hvernig nota má Google Maps á vefnum gegnum MapConductor. Google Maps JavaScript API hleðst kvikt, svo ekkert script-tag þarf að skrifa — en 2D og 3D eru aðskildar sýnareiningar.
Áður en þú byrjar
Fáðu API-lykil
- Virkjaðu Maps JavaScript API í Google Cloud Console.
- Búðu til API-lykil undir Credentials.
- Takmarkaðu lykilinn eftir HTTP-tilvísanda við þau lén sem þú birtir frá.
Settu upp
Google Maps JavaScript API hleðst kvikt gegnum @googlemaps/js-api-loader, sem fylgir pakkanum. Ekkert annað að setja upp, og engan CSS að flytja inn.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsSendu lykilinn til stöðu-hooksins
Lykillinn fer til stöðu-hooksins, ekki í props sýnareiningarinnar — props enda gjarnan í prófunarskrám og skyndimyndum.
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});Veldu milli 2D og 3D
Google Maps hefur tvo óháða stakka, og MapConductor birtir eina sýn fyrir hvorn; þær deila stöðuhlut. Að setja mapId skiptir líka merkjum tvívíða þjónustuaðilans yfir í AdvancedMarkerElement — án þess fellur hann aftur á eldri teiknarann.
// Classic 2D map (google.maps.Map)
<GoogleMapView2D state={mapState} mapId="YOUR_MAP_ID" />
// True 3D camera (google.maps.maps3d.Map3DElement)
<GoogleMapView state={mapState} mapId="YOUR_MAP_ID" version="alpha" />STAÐFESTA
Það sem þú ættir að sjá
Kort miðað á Tókýó með einu merki þýðir að þú ert búin/n.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<GoogleMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</GoogleMapView2D>
);
}Stöðuhlutur
Það sem useGoogleMapViewState tekur við.
useGoogleMapViewState({
id?: string;
apiKey?: string; // required in practice
mapId?: string; // Advanced Markers / cloud styling
mapDesignType?: GoogleMapDesignType; // default GoogleMapDesign.Normal
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})Kortahönnun
GoogleMapDesign varpast á kortategundir Google.
Bilanaleit
Kortið birtist ekki
- Athugaðu að lykillinn berist til stöðu-hooksins og að umhverfisbreytan hafi leyst upp.
- Staðfestu að tilvísandatakmörkun lykilsins passi við lénið sem þú birtir frá.
Þrívíða sýnin kastar villu
- Athugaðu að þú sért ekki að senda Terrain eða None — þrívíða sýnin tekur aðeins við Normal, Hybrid og Satellite.
- Staðfestu að þú hafir sent version="alpha".
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
Þrívíða sýnin endurkvarðar fjarlægð myndavélarinnar þegar sýnarglugginn breytist, svo aðdrátturinn lítur eins út í hvaða gluggastærð sem er.