Javascript 反应谷歌地图添加标记与用户位置

我已经将谷歌地图集成到我的网站中，我想添加一个带有用户位置的标记。第一个文件是Map.js，第二个文件是MapContainer.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，{Fragment}来自“React”；
进口{
用谷歌地图，
谷歌地图，
用ScriptJS，
标记，
圆圈
}从“谷歌地图反应”；
常量映射=道具=>{
返回(

{
props.places.map（place=>{
返回(

{place.circle&&
}
);
})
}
);
}
使用ScriptJS导出默认值（使用谷歌地图（Map））；
//位置={lat:45.764288，lng:21.209806}

~

import React，{Component}来自“React”；
从“/Map”导入地图；
常数数据=[
{
id:1，
名称：“维德地带”，
纬度：“45.752814”，
经度：“21.229137”
},
{
id:2，
姓名：“Zona Galbena”，
纬度：“45.752814”，
经度：“21.229137”
},
{
id:3，
姓名：“Zona Rosie”，
纬度：“45.752814”，
经度：“21.229137”
},
];
数据[0]。圆={
半径：10000，
选项：{
strokeColor:“绿色”，
不透明度：“0.1”，
填充颜色：“绿色”
}
};
数据[1]。圆={
半径：20000，
选项：{
strokeColor:“黄色”，
填充颜色：“黄色”，
填充不透明度：“0.1”
}
};
数据[2]。圆={
半径：30000，
选项：{
strokeColor：“红色”，
填充颜色：“红色”，
填充不透明度：“0.1”
}
};
导出默认函数MapContainer（）{
返回(
);
}

只需将标记组件放在谷歌地图中，就像添加圆圈一样

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

const Map=（道具）=>{
返回(
/*圈*/
);
};

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

<Map marker={ props.marker } style={ /* etc. */ }/>

//inside GogleMap
<Marker position={ props.marker } />

//内护目镜

更新

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

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

const Map=（道具）=>{
返回(
/*圈*/
);
};

导出默认函数MapContainer（）{
常量[marker，setMarker]=useState（null）
useffect（（）=>{
navigator.geolocation.getCurrentPosition(
（位置）=>setMarker（{
let:location.coords.latitude，
液化天然气：位置.坐标.经度
})
)
}, [])
返回(
);
}

---

然后您可以将标记作为道具传递给地图。

对不起，我不想手动添加坐标。我希望它成为用户位置的标记。更具体地说：当用户使用该站点时，地图上应该显示一个标记，表示他的位置，在本例中，仅为他以及在称为“标记”的状态下应该写入的内容。

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>
    );
}