如何添加标记 onClick 并在 google-maps-react 中显示我的地理位置？

IT技术 javascript reactjs google-maps react-google-maps
2021-05-15 06:58:53

我在 google maps 文档中找到了很多有用的信息，但是在 html 中简单地使用了 js，以防万一react我不明白。

源代码：

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MainMap extends Component {
    render() {
        return (
            <div>
                <h1 className="text-center">My Maps</h1>
            <Map google={this.props.google}
                 style={{width: '80%', margin: 'auto'}}
                 className={'map'}
                 zoom={14}>
                <Marker
                    title={'The marker`s title will appear as a tooltip.'}
                    name={'SOMA'}
                    position={{lat: 37.778519, lng: -122.405640}} />
                <Marker
                    name={'Dolores park'}
                    position={{lat: 37.759703, lng: -122.428093}} />
                <Marker />
                <Marker
                    name={'Your position'}
                    position={{lat: 46.475640, lng: 30.759497}}/>
            </Map>
            </div>
        );
    }
}



export default GoogleApiWrapper({
    apiKey: (MY-API-KEY)
})(MainMap);

我想通过点击地图添加标记，但不知道如何...请帮忙！

1个回答

地图有一个onClickprops，您可以提供一个函数来处理地图上的点击。此函数的第三个参数包括点击的坐标。

您可以使用这些坐标将标记添加到您在render方法中使用的状态。

例子

class MainMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        {
          title: "The marker`s title will appear as a tooltip.",
          name: "SOMA",
          position: { lat: 37.778519, lng: -122.40564 }
        }
      ]
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick(t, map, coord) {
    const { latLng } = coord;
    const lat = latLng.lat();
    const lng = latLng.lng();

    this.setState(previousState => {
      return {
        markers: [
          ...previousState.markers,
          {
            title: "",
            name: "",
            position: { lat, lng }
          }
        ]
      };
    });
  }

  render() {
    return (
      <div>
        <h1 className="text-center">My Maps</h1>
        <Map
          google={this.props.google}
          style={{ width: "80%", margin: "auto" }}
          className={"map"}
          zoom={14}
          onClick={this.onClick}
        >
          {this.state.markers.map((marker, index) => (
            <Marker
              key={index}
              title={marker.title}
              name={marker.name}
              position={marker.position}
            />
          ))}
        </Map>
      </div>
    );
  }
}

const App = GoogleApiWrapper({
  apiKey: (MY-API-KEY)
})(MainMap);
其它你可能感兴趣的问题
上一篇如何让 Ender 5 使用 BLTouch 探针进行 Z 归位？ 下一篇石蜡中的斑点或白斑