如何使用react-google-maps顯示多個標記

Question

我試圖使用名爲react-google-maps的npm包顯示多個標記，而且我遇到了困難時間。我在這裏演示瞭如何顯示一個地圖標記（https://tomchentw.github.io/react-google-maps/events/simple-click-event），但是當我在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組件和映射了他們像這樣：

<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

我想你忘了在SimpleClickEventExampleGoogleMap組件中傳遞道具marker2center。

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