reactjs - 蓝点图标反应谷歌地图

Question

我为移动浏览器 react-google-maps 构建了简单的网络应用程序。我正在尝试显示蓝点图标以指示用户当前位置。但是使用 react-google-maps 是不可能的。任何人都可以帮助使用 react-google-map 在地图上显示蓝点图标。有没有办法把蓝色变成红色？

 `     render() {
            <div>
            <MapWithAMarker markers={this}
            googleMapURL="https://maps.googleapis.com/maps/api/js?
            key=key&v=3.exp&libraries=geometry,drawing,places"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            />}</div> }

           const MapWithAMarker = compose(
           withScriptjs,
           withGoogleMap)(function(that) { 
           <GoogleMap
            center={{lat: parseFloat(props.currentLocation.lat), lng: 
            parseFloat(props.currentLocation.lng) }}
            defaultZoom={5}
            ref={map => (window.map = map)}
            defaultCenter={{ lat: 
            parseFloat(props.currentLocation.lat), lng: 
            parseFloat(props.currentLocation.lng) }}
            ></GoogleMap>
           });

`

Answer 1

因为 javascript API 不提供 currentLocation 模块。但是我们使用标记来做到这一点

<GoogleMap
        center={{lat: parseFloat(props.currentLocation.lat), lng: 
        parseFloat(props.currentLocation.lng) }}
        defaultZoom={5}
        ref={map => (window.map = map)}
        defaultCenter={{ lat: 
        parseFloat(props.currentLocation.lat), lng: 
        parseFloat(props.currentLocation.lng) }}
        >
 <Marker
        position={{ lat: 
        parseFloat(props.currentLocation.lat), lng: 
        parseFloat(props.currentLocation.lng) }}
        icon={{
          url: '/build/icon/yourIcon.svg',
        }}
      />
    )}

</GoogleMap>

如果您需要进一步的帮助，请告诉我。