React谷歌地图添加带有用户位置的标记

Question

我已经将谷歌地图集成到我的网站中，我想添加一个带有用户位置的标记。第一个文件是Map.js，第二个是MapContainer.js在这个文件中，我有地图渲染、圆、缩放、API和地图尺寸的所有数据很抱歉代码格式，但这是我第二次在这个社区上写作

import React, { Fragment } from "react";
import {
withGoogleMap,
GoogleMap,
withScriptjs,
Marker,
Circle
} from "react-google-maps";


const Map = props => {
return (
< GoogleMap
defaultZoom={props.zoom}
defaultCenter={props.center}

>
{
props.places.map(place => {
return (
< Fragment key={place.id} >
{place.circle && <Circle
defaultCenter={{
lat: parseFloat(place.latitude),
lng: parseFloat(place.longitude)
}}
radius={place.circle.radius}
options={place.circle.options}
/>
}
</Fragment>
);
})
}
</GoogleMap >
);
}
export default withScriptjs(withGoogleMap(Map));
// position = {{ lat: 45.764288, lng: 21.209806 }}

~

import React, { Component } from "react";
import Map from "./Map";

const data = [
{
id: 1,
name: "Zona Verde",
latitude: "45.752814",
longitude: "21.229137"
},
{
id: 2,
name: "Zona Galbena",
latitude: "45.752814",
longitude: "21.229137"
},
{
id: 3,
name: "Zona Rosie",
latitude: "45.752814",
longitude: "21.229137"
},

];

data[0].circle = {
radius: 10000,
options: {
strokeColor: "green",
fillOpacity: "0.1",
fillColor: "green"
}
};
data[1].circle = {
radius: 20000,
options: {
strokeColor: "yellow",
fillColor: "yellow",
fillOpacity: "0.1"
}
};
data[2].circle = {
radius: 30000,
options: {
strokeColor: "red",
fillColor: "red",
fillOpacity: "0.1"
}
};
export default function MapContainer() {
return (
<div>
<Map
style={{ borderRadius: "25px" }}
center={{ lat: 45.764288, lng: 21.209806 }}
zoom={10}
places={data}
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_6NDZYcE5HDyU9onLOGrsLN2kgW0QIn4"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}

Answer 1

只需像添加圆圈一样，将Marker组件放入GoogleMap中。

const Map = (props) => {
return (
<GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
<Marker position={{ lat: 45.764288, lng: 21.209806 }} />
/* circles */
</GoogleMap>
);
};

此外，您还可以将另一个道具添加到贴图组件，并将标记与其他道具一起传递。

<Map marker={ props.marker } style={ /* etc. */ }/>
//inside GogleMap
<Marker position={ props.marker } />

更新

使用我之前的答案，但也向MapContainer添加新状态，该状态将传递给Map。此状态将是从地理定位API获取的用户位置。

const Map = (props) => {
return (
<GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
<Marker position={{ lat: 45.764288, lng: 21.209806 }} />
/* circles */
</GoogleMap>
);
};

export default function MapContainer() {
const [ marker, setMarker ] = useState(null)
useEffect(() => {
navigator.geolocation.getCurrentPosition(
( location ) => setMarker({ 
let: location.coords.latitude,
lng: location.coords.longitude
})
)
}, [])
return (
<div>
<Map
marker={ marker }
style={{ borderRadius: "25px" }}
/* etc. */
/>
</div>
);
}

然后可以将标记作为道具传递给Map。