如何使用react-google-maps显示多个标记

时间：2017-05-09 01:53:42

标签： javascript google-maps reactjs google-maps-api-3 maps

我正在尝试使用名为react-google-maps的npm包显示多个标记，而且我遇到了困难。我在这里关注如何显示一个地图标记（https://tomchentw.github.io/react-google-maps/events/simple-click-event）的演示，但是当我对谷歌地图组件添加第二个标记元素的过程中我很难理解，我无法显示该标记（我也改变了坐标）。它真的很困扰我，如果有人能指出出了什么问题，我会非常感激。

感谢。

这是我摆弄它的代码。 我唯一改变的是添加第二个标记，使用新的坐标。

/* global google */
import {
  default as React,
  Component,
} from "react";


import withGoogleMap from './assets/withGoogleMap';
import GoogleMap from './assets/GoogleMap';
import Marker from './assets/Marker';

const SimpleClickEventExampleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapMounted}
    zoom={props.zoom}
    center={props.center}
    onCenterChanged={props.onCenterChanged}
  >
    <Marker
      defaultPosition={props.center}
      title="Click to zoom"
      onClick={props.onMarkerClick}
    />

    <Marker
      defaultPosition={props.marker2center}
      title="Click to zoom"
      onClick={props.onMarkerClick}
    />



  </GoogleMap>
));

const INITIAL_CENTER = { lat: -25.363882, lng: 131.044922 };
const MARKER1_CENTER = { lat: -25.363882, lng: 131.044922 };
const MARKER2_CENTER = { lat: -25.44, lng: 131.55 };

/*
 * https://developers.google.com/maps/documentation/javascript/examples/event-simple
 *
 * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
 */
export default class SimpleClickEventExample extends Component {



  state = {
    zoom: 4,
    center: INITIAL_CENTER,
    marker2center: MARKER2_CENTER
  };

  handleMapMounted = this.handleMapMounted.bind(this);
  handleCenterChanged = this.handleCenterChanged.bind(this);
  handleMarkerClick = this.handleMarkerClick.bind(this);

  handleMapMounted(map) {
    this._map = map;
  }

  handleMarkerClick() {
    this.setState({
      zoom: 8,
    });
  }

  handleCenterChanged() {
    const nextCenter = this._map.getCenter();
    if (nextCenter.equals(new google.maps.LatLng(INITIAL_CENTER))) {
      // Notice: Check nextCenter equality here,
      // or it will fire center_changed event infinitely
      return;
    }
    if (this._timeoutId) {
      clearTimeout(this._timeoutId);
    }
    this._timeoutId = setTimeout(() => {
      this.setState({ center: INITIAL_CENTER });
      this._timeoutId = null;
    }, 3000);

    this.setState({
      // Because center now is a controlled variable, we need to set it to new
      // value when "center_changed". Or in the next render it will use out-dated
      // state.center and reset the center of the map to the old location.
      // We can never drag the map.
      center: nextCenter,
    });
  }

  componentWillUnmount() {
    if (this._timeoutId) {
      clearTimeout(this._timeoutId);
    }
  }

  render() {
    return (
      <div className='googleMap' style={{width: "500px", height: "500px", margin: "0 auto"}}>
        <SimpleClickEventExampleGoogleMap
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          zoom={this.state.zoom}
          center={this.state.center}
          onMapMounted={this.handleMapMounted}
          onCenterChanged={this.handleCenterChanged}
          onMarkerClick={this.handleMarkerClick}
        />
      </div>
    );
  }
}

5 个答案:

答案 0 :(得分：2)

您需要将作为孩子的标记数组传递给GoogleMap组件并将其映射到它们上面，如下所示：

<GoogleMap>
{props.markers.map(marker => (
    <Marker
      position={{ lat: marker.latitude, lng: marker.longitude }}
      key={marker.id}
    />
))}
</GoogleMap>

在https://github.com/tomchentw/react-google-maps#withgooglemap和https://tomchentw.github.io/react-google-maps/addons/marker-clusterer

上查看更多信息

答案 1 :(得分：2)

我想你忘了在marker2center组件中传递道具SimpleClickEventExampleGoogleMap。

看看marker2center={this.state.marker2center}：

<SimpleClickEventExampleGoogleMap
  containerElement={
    <div style={{ height: `100%` }} />
  }
  mapElement={
    <div style={{ height: `100%` }} />
  }
  zoom={this.state.zoom}
  center={this.state.center}
  marker2center={this.state.marker2center}
  onMapMounted={this.handleMapMounted}
  onCenterChanged={this.handleCenterChanged}
  onMarkerClick={this.handleMarkerClick}
/>

当然，如果您打算使用数千个标记，可以使用map，这样您就不需要手动将每个标记放在地图中。

改变一下会是这样的：

<SimpleClickEventExampleGoogleMap
  containerElement={
    <div style={{ height: `100%` }} />
  }
  mapElement={
    <div style={{ height: `100%` }} />
  }
  zoom={this.state.zoom}
  center={this.state.center}
  markers={[MARKER1_CENTER, MARKER2_CENTER]}
  onMapMounted={this.handleMapMounted}
  onCenterChanged={this.handleCenterChanged}
  onMarkerClick={this.handleMarkerClick}
/>

const SimpleClickEventExampleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapMounted}
    zoom={props.zoom}
    center={props.center}
    onCenterChanged={props.onCenterChanged}
  >
    {props.markers.map((marker, index)=> {
      return (
        <Marker
          position={marker}
          title="Click to zoom"
          onClick={props.onMarkerClick}
        />
      )
    })}
  </GoogleMap>
));

答案 2 :(得分：1)

我在我的代码中使用了它，幸运的是它有效！

write.csv(df, file = "mynewfile.csv", col.names = T, row.names = F, encoding="UTF-8", quote = FALSE)

答案 3 :(得分：0)

要显示多个标记，您要做的就是在带有标记位置的数组中进行迭代。

{marks.map((mark, index) => <Marker key={index} position={mark} />)}

这是具有更多功能的解决方案。每当用户单击该代码段时，该代码段都会在地图上添加多个圆圈。

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

const Map = withScriptjs(
    withGoogleMap(props => (
        <GoogleMap
            defaultZoom={12}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
            onClick={e => props.onMapClick(e)}
        >
            {props.marks.map((mark, index) => (
                <Circle
                    key={index}
                    center={mark}
                    radius={1000}
                    options={{
                        strokeColor: "#66009a",
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: `#66009a`,
                        fillOpacity: 0.35,
                        zIndex: 1
                    }}
                />
            ))}
        </GoogleMap>
    ))
);

class ReportsPage extends Component {
    state = {
        marks: []
    };

    setMark = e => {
        this.setState({ marks: [...this.state.marks, e.latLng] });
    };

    deleteMarkS = () => {
        this.setState({
            marks: []
        });
    };

    render() {
        const { marks } = this.state;
        return (
            <div>
                <button onClick={this.deleteMark}>DELETE MARKS</button>
                <Map
                    googleMapURL="http://maps.googleapis.com/maps/api/js?key=[YOUR GOOGLE MAPS KEY]"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    onMapClick={this.setMark}
                    marks={marks}
                />;
            </div>
        );
    }
}

export default ReportsPage;

别忘了为您的真实密钥更改[您的GOOGLE MAPS KEY]。

答案 4 :(得分：-3)

停止与react-google-map打交道。有更好的（有更好的社区）包。 检查google-map-react包。 我做了这个包的实现，它非常容易使用：https://github.com/BrodaNoel/devseverywhere/blob/master/src/containers/Metrics/index.jsx

编辑： 如果链接断开，只需在整个项目中搜索GoogleMapReact。

相关问题
最新问题