如何在 React 中實現向 map 添加標記

Question

我使用“google-map-react”在我的網站上嵌入了 map。 我需要實現向 map 添加自定義標記。 在代碼中指定坐標並在保存標記后出現在 map 上。 如何實施？

 import GoogleMapReact from "google-map-react"; const Map = () => { const defaultProps = { center: { lat: 10.99835602, lng: 77.01502627, }, zoom: 11, }; return ( <div> <div style={{ height: "100vh", width: "100%" }}> <GoogleMapReact bootstrapURLKeys={{ key: "" }} defaultCenter={defaultProps.center} defaultZoom={defaultProps.zoom} ></GoogleMapReact> </div> </div> ); }; export default Map;

Answer 1

您可以使用@react-google-maps/api庫並像這樣實現它：

 import React from 'react' import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; const MapComponent = (props) => { const { location, zoom } = props; const containerStyle = { width: '100%', height: '95vh' }; var { isLoaded } = useJsApiLoader({ id: 'google-map-script', googleMapsApiKey: /* Your API key */ }) return isLoaded? <GoogleMap mapContainerStyle={containerStyle} defaultCenter={location} defaultZoom={zoom} > <Marker position={location} /> </GoogleMap>: <></> } export default MapComponent;