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>

让我知道您是否需要进一步的帮助。

蓝点图标反应谷歌地图

1 个答案: