MapConductorการตั้งค่า Google Maps
นี่คือขั้นตอนในการใช้ Google Maps บนเว็บผ่าน MapConductor มีการโหลด Google Maps JavaScript API แบบไดนามิก ดังนั้นจึงไม่จำเป็นต้องเขียนแท็ก script 2D และ 3D ใช้มุมมองที่แตกต่างกัน
ก่อนเริ่ม
รับคีย์ API
- เปิดใช้งาน Maps JavaScript API ใน Google Cloud Console
- สร้างคีย์ API จาก "Credentials"
- จำกัดคีย์ด้วย HTTP referer ของโดเมนที่ให้บริการ
ติดตั้ง
มีการโหลด Google Maps JavaScript API แบบไดนามิกด้วย @googlemaps/js-api-loader โหลดเดอร์นี้รวมอยู่ในแพ็กเกจ ดังนั้นจึงไม่จำเป็นต้องติดตั้งแยกหรือโหลด CSS
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsส่งคีย์ไปยัง state hook
ส่งคีย์ไปยัง state hook ไม่ใช่ props ของ component มุมมอง เพราะหากวางไว้ใน props จะปนกับบันทึกและสแน็ปชอตของการทดสอบ
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 }),
});สลับระหว่าง 2D และ 3D
Google Maps มีสองสแต็ก และ MapConductor มอบวิวที่แตกต่างกันสำหรับแต่ละอย่าง ทั้งสองแบ่งปันออบเจ็กต์สถานะเดียวกัน หากตั้งค่า mapId ตัวทำเครื่องหมายด้าน 2D จะถูกวาดด้วย AdvancedMarkerElement หากไม่ได้ตั้งค่าจะกลายเป็นตัวทำเครื่องหมายแบบดั้งเดิม
// 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" />ตรวจสอบ
สิ่งที่ควรเห็น
เมื่อแผนที่ปรากฏขึ้นโดยมีโตเกียวเป็นศูนย์กลางและมีตัวทำเครื่องหมาย 1 ตัว ถือว่าเสร็จสิ้นแล้ว
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>
);
}อ็อบเจกต์สถานะ
พารามิเตอร์ที่ useGoogleMapViewState รับ
useGoogleMapViewState({
id?: string;
apiKey?: string; // required in practice
mapId?: string; // Advanced Markers / cloud styling
mapDesignType?: GoogleMapDesignType; // default GoogleMapDesign.Normal
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})ดีไซน์แผนที่
GoogleMapDesign สอดคล้องกับประเภทแผนที่ของ Google
การแก้ปัญหา
แผนที่ไม่แสดง
- ตรวจสอบว่ามีการส่งคีย์ไปยัง state hook หรือสามารถอ่านตัวแปรสภาพแวดล้อมได้หรือไม่
- ตรวจสอบใน Console ว่าข้อจำกัดการอ้างอิงของคีย์ตรงกับโดเมนการส่งมอบจริงหรือไม่
มุมมอง 3D โยนข้อยกเว้น
- ตรวจสอบว่ามีการส่ง Terrain หรือ None ไปยัง `mapDesignType` หรือไม่ 3D รองรับเฉพาะ Normal, Hybrid และ Satellite เท่านั้น
- ตรวจสอบว่ามีการส่ง `version="alpha"` หรือไม่
แผนที่ถูกเริ่มต้นสองครั้งเฉพาะระหว่างการพัฒนา
- React StrictMode ดำเนินการ effect สองครั้ง เนื่องจากผู้ให้บริการแต่ละรายตรวจพบสิ่งนี้และทำให้ลบอันหนึ่งออก คุณจึงไม่จำเป็นต้องปิด StrictMode
ถัดไป
ในมุมมอง 3D ระยะของกล้องจะได้รับการชดเชยตามขนาดหน้าต่าง ดังนั้นรูปลักษณ์ของการซูมจะสอดคล้องกันแม้ว่าขนาดหน้าจอจะเปลี่ยนไป