react-google-mapsで複数のマーカーを表示するには

Question

react-google-mapsというnpmパッケージを使用して複数のマーカーを表示しようとしていますが、苦労しています。私は1つのマップマーカー（https://tomchentw.github.io/react-google-maps/events/simple-click-event）を表示する方法についてここでデモを行っていますが、GoogleMapコンポーネントに2番目のマーカー要素を追加することがわかりましたら、そのマーカーを表示することはできません座標も変更されました）。それは本当に私を気にしています。誰かが間違っていることを指摘できれば、本当に感謝しています。

ありがとうございました。

ここでは、私がそれを手にしたようなコードです。 私が変更したのは、新しい座標で2番目のマーカーが追加されたことだけです。

あなたは GoogleMapコンポーネントの子としてのマーカーの配列を渡すと、そのようにそれらの上にマッピングする必要があり

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

Answer 1

：

<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

Answer 2

停止に対処react-google-map。より良い（よりよいコミュニティで）パッケージがあります。 google-map-reactパッケージを確認してください。 私は、このパッケージの実装を行なったし、それは本当に使いやすいです：https://github.com/BrodaNoel/devseverywhere/blob/master/src/containers/Metrics/index.jsx

編集：リンクが壊れている 場合は、単にプロジェクト全体でGoogleMapReactを検索します。

Answer 3

marker2centerの小道具をSimpleClickEventExampleGoogleMapに渡すのを忘れたと思います。

見marker2center={this.state.marker2center}ください：あなたはあなたが手動でマップ内のすべてのマーカーを配置する必要はありませんmapを使用することができるマーカーの千で作業しようとしている場合は、もちろん

<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} 
/> 

を。

次のようになりビットを変更する：

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