最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Getting latlng from google map using react-google-maps - Stack Overflow

programmeradmin2浏览0评论

I have my map ponent

const MyMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: props.lat, lng: props.lng }}
      onClick={e => console.log(e)}
    >
      {props.isMarkerShown && (
        <Marker position={{ lat: props.lat, lng: props.lng }} />
      )}
      <MarkerClusterer averageCenter enableRetinaIcons gridSize={60}>
        {props.markers.map(marker => (
          <CustomMarker
            key={marker.id}
            marker={marker}

          />
        ))}
      </MarkerClusterer>
    </GoogleMap>
  ))
);
export default MyMapComponent;

And I have my app ponent that return this code

  return (
      <div className="container">
        <div className="map">
// myMapComponent imported as Map
          <Map
            onMapClick={this.onMapClick}

            googleMapURL=".exp&key=YOUR_API_KEY"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `95vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            lat={this.state.lat}
            lng={this.state.lng}
            markers={filteredResturants}

          />
        </div>

      </div>
    );

I want have lat/lng when a user clicks on map. The most straightforward way I found in every answer is to have onClick event and in e you get e.latLng object. But I have been getting empty latLng object. I have tried putting onClick event on myMapComponent as well as on Map ponent. This is what I get.

.Jm {latLng: _.N, ya: MouseEvent, pixel: _.K, qa: _.K}latLng: _.N {lat: ƒ, lng: ƒ}ya: MouseEvent {isTrusted: false, screenX: 91, screenY: 262, clientX: 91, clientY: 262, …}pixel: _.K {x: 75, y: 246}qa: _.K {x: 128.92420605694446, y: 88.34013104858127}__proto__: Object
latLng: _.N
lat: ƒ ()
lng: ƒ ()

I have my map ponent

const MyMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: props.lat, lng: props.lng }}
      onClick={e => console.log(e)}
    >
      {props.isMarkerShown && (
        <Marker position={{ lat: props.lat, lng: props.lng }} />
      )}
      <MarkerClusterer averageCenter enableRetinaIcons gridSize={60}>
        {props.markers.map(marker => (
          <CustomMarker
            key={marker.id}
            marker={marker}

          />
        ))}
      </MarkerClusterer>
    </GoogleMap>
  ))
);
export default MyMapComponent;

And I have my app ponent that return this code

  return (
      <div className="container">
        <div className="map">
// myMapComponent imported as Map
          <Map
            onMapClick={this.onMapClick}

            googleMapURL="https://maps.googleapis./maps/api/js?v=3.exp&key=YOUR_API_KEY"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `95vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            lat={this.state.lat}
            lng={this.state.lng}
            markers={filteredResturants}

          />
        </div>

      </div>
    );

I want have lat/lng when a user clicks on map. The most straightforward way I found in every answer is to have onClick event and in e you get e.latLng object. But I have been getting empty latLng object. I have tried putting onClick event on myMapComponent as well as on Map ponent. This is what I get.

.Jm {latLng: _.N, ya: MouseEvent, pixel: _.K, qa: _.K}latLng: _.N {lat: ƒ, lng: ƒ}ya: MouseEvent {isTrusted: false, screenX: 91, screenY: 262, clientX: 91, clientY: 262, …}pixel: _.K {x: 75, y: 246}qa: _.K {x: 128.92420605694446, y: 88.34013104858127}__proto__: Object
latLng: _.N
lat: ƒ ()
lng: ƒ ()
Share Improve this question edited Jan 29, 2020 at 8:38 Pagemag 2,9871 gold badge11 silver badges19 bronze badges asked Jan 21, 2020 at 10:39 MehmoodMehmood 1291 gold badge2 silver badges12 bronze badges 1
  • I've removed your API key from your question. Please don't share private API keys on public sites, and make sure you restrict them as per developers.google./maps/… – Pagemag Commented Jan 29, 2020 at 6:46
Add a ment  | 

1 Answer 1

Reset to default 7

Try e.latLng.lat() or e.latLng.lng() - notice the parenthesis.

What I understand from your console is that lat, lng are getter functions not object properties - see this for more info.

发布评论

评论列表(0)

  1. 暂无评论