Question

我试图在谷歌地图上获得当前位置。当我得到坐标时，代码工作正常，但我想得到的这些坐标和google map toom因为现在，坐标对于谷歌地图是静态的。

var arr = [
{"stock1":"aaaa","stock2":"bbbb"},
{"stock1":"aaaa","stock2":"bbbb"},
{"stock1":"aaaa","stock2":"bbbb"}]

arr.map(function(x){
x.identifier = "userid"
})

console.log(arr)

使用Geolocation我得到的坐标非常好，但这些坐标想要设置：

 import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import { withGoogleMap, GoogleMap, Marker } from "google-map-react"
import { InfoWindow } from 'google-map-react';
import Geolocation from 'react-geolocation'


const AnyReactComponent = ({ text }) => <div>{ text }</div>;



export default class Map extends Component {


  static defaultProps = {
    center: { lat: 40.7446790, lng: -73.9485420 },
    zoom: 11
  }
render() {
    return (
      <Geolocation
  render={({
    fetchingPosition,
    position: { coords: { latitude, longitude } = {} } = {},
    error,
    getCurrentPosition
  }) =>
    <div>
      <button onClick={getCurrentPosition}>Get Position</button>
      {error &&
        <div>
          {error.message}
        </div>}
      <pre>
        latitude: {latitude}
        longitude: {longitude}
      </pre>
      <div className='google-map' style={{ height: '80vh', width: '100%' }}>

        <GoogleMapReact

          defaultCenter={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ latitude }
            lng={ longitude }
            text={ 'Wheres Waldo?' }
          />
        </GoogleMapReact>
      </div>
    </div>}
/>
    )
  }
}

Answer 1

您必须为<Map>组件定义一个状态，该组件将存储您当前的坐标。然后，您应该将状态传递给GoogleMapReact组件。

为了使用地理位置服务找到的坐标设置状态，您可以使用onSuccess回调（https://www.npmjs.com/package/react-geolocation#onsuccess-function）：

<Geolocation
    onSuccess={this.geoSuccess}
    ...
/>

geoSuccess功能是：

geoSuccess = position => { 
   let coords = {
     lat: position.coords.latitude,
     lng: position.coords.longitude
   }

   this.setState({
     center: coords
   })
};

在这里演示： https://43qv620770.codesandbox.io/

可在此处找到完整代码（文件Map.js）： https://codesandbox.io/s/43qv620770

Google地图坐标在做出反应

1 个答案: