我开发了日托申请,因此,我想在谷歌地图上显示日托地点。 我将谷歌地图与React应用程序结合起来。 在装上申请时,正确显示地点。 然而,在拖拉或失眠时,我的所在地也随之移动。 地点应保持不变。 我是用No.js作为背后方表示的。
Here s a video of the issue
https://app.crcastification.com/v3/watch/DltGBIYDwrZY0xlJw6v9
This is my code
import React, { useState, useEffect } from "react";
import GoogleMapReact from google-map-react ;
import { Icon } from "@iconify/react";
import locationIcon from "@iconify/icons-mdi/map-marker";
const LocationPin = ({ name }) => (
<div className="pin">
<Icon icon={locationIcon} className="pin-icon" />
<p className="pin-text">{name}</p>
</div>
);
const Map = ({ daycares }) => {
const [latitude, setLatitude] = useState(43.77887);
const [longitude, setLongitude] = useState(-79.17282);
useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
setLatitude(position.coords.latitude);
setLongitude(position.coords.longitude);
},
(error) => {
console.error(error);
}
);
}, []); // Empty dependency array means this effect runs only once after the initial render
const renderMap = () => {
if (!daycares || daycares.length === 0) {
return null; // Return early if daycares is empty or undefined
}
return (
<div style={{ height: "80vh", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "AIzaSyAzEQgX_hi-_Qnv6aWWIQDAdcLYnFPqQSQ" }}
defaultCenter={{
lat: latitude,
lng: longitude
}}
defaultZoom={12}
>
{daycares.map((daycare) => (
<LocationPin
key={daycare.id}
lat={parseFloat(daycare.latitude)}
lng={parseFloat(daycare.longitude)}
name={daycare.childcare_name}
/>
))}
</GoogleMapReact>
</div>
);
};
return (
<div>
{renderMap()}
</div>
);
};
export default Map;
const LocationPin = ({ lat, lng, name }) => (
<div className="pin" style={{ position: absolute , transform: translate(-50%, -50%) }}>
<Icon icon={locationIcon} className="pin-icon" />
<p className="pin-text">{name}</p>
</div>
);
export default LocationPin;
所在地始终应当保持不变。
My mock Data, {childcare_name: East Side Preschool , address: 458 Fairall Street , city: Ajax , region: Ontario , postalcode: L1S 1R6 , country: CANADA , latitude: "43.75991", longitude:"-79.18827", owner_name: Jessica Lee , age_range: 2-6 , years: 4 , infant_capacity: 8 , toddler_capacity: 12 , preschool_capacity: 18 , contact_phone: 555-9012 , contact_email: [email protected] }, { childcare_name: "Kepalen Angelic Child Care Daycare", address: "1301 Neilson Rd", city: "Scarborough", region: "Ontario", postalcode: "M1B 3C2", country: "Canada", latitude: "43.80716", longitude: "-79.21856", owner_name: "Nabhila", age_range: "0-6", years: "3", infant_capacity: "15", toddler_capacity: "20", preschool_capacity: "25", contact_phone: "555-1357", contact_email: "[email protected]" }
