时间戳

首页 > 解决方案 > 反应谷歌地图添加标记与用户位置

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

标签： javascriptreactjs

解决方案

只需将 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。此状态将是从 Geolocalization 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>
    );
}

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

推荐阅读