質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

ReactでGeolocation APIを使用した現在地の取得ができない。

削除済ユーザー
削除済ユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

1663閲覧

投稿2019/11/03 12:28

前提・実現したいこと

React+Redux+Laravelを使用して個人でアプリケーションを開発しています。
そこで、現在地を取得してGoogleMapsで表示させようと思っているのですが、なぜか現在地がでたらめな場所に表示されてしまいます。関西と関東ほどの誤差があります。
現在地の取得にはcomponentDidMount内でJS標準のGeolocation APIを使用して取得した緯度、経度をstateに保存して使用しています。GoogleMapsの表示に関してはgoogle-map-reactを使用しています。
どなたか解決方法のご教授お願いいたします。

※開発環境にはLaradocを使用しています。
※getGourmet関数に関してはホットペッパーAPIを叩いているだけですので今回は関係ないです。

該当のソースコード

JavaScript

import React from 'react' import { Link } from 'react-router-dom' import { withStyles } from '@material-ui/core/styles' import GoogleMapReact from 'google-map-react' import * as actions from '../../actions' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import Card from '@material-ui/core/Card' import CardActions from '@material-ui/core/CardActions' import CardContent from '@material-ui/core/CardContent' import CardMedia from '@material-ui/core/CardMedia' import Button from '@material-ui/core/Button' import AddLocationIcon from '@material-ui/icons/AddLocation' import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople' import Replay from '@material-ui/icons/Replay' const drawerWidth = 250 // Width for Drawer const styles = (theme) => ({ root: { [theme.breakpoints.up('md')]: { width: `calc(100% - ${drawerWidth}px)`, marginLeft: drawerWidth }, padding: 30, }, toolbar: theme.mixins.toolbar, // Minimum height of Toolbar link: { textDecoration: 'none' }, titleArea: { margin: '0 auto', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }, title: { margin: '0 auto', marginBottom: 20, padding: 0 }, btn: { margin: 'auto', textAlign: 'center', }, map: { width: '90vmin', height: '90vmin', marginTop: 40, marginBottom: 50, margin: '0 auto' }, shopListTitle: { textAlign: 'center' }, card: { [theme.breakpoints.up('sm')]: { width: '45%' }, width: '100%', margin: 10, }, cardTitle: { textDecoration: 'none', color: 'black', }, infoTable: { borderCollapse: 'collapse' }, info: { border: 'solid 1px red', padding: 5 }, share: { textDecoration: 'none', color: '#bbb' }, more: { textDecoration: 'none', color: '#bbb' }, cards: { display: 'flex', flexWrap: 'wrap', margin: '0 auto', } }) const Me = () => <div><EmojiPeopleIcon /></div> const Pin = () => <div><AddLocationIcon /></div> class Result extends React.Component { constructor(props) { super(props) this.state = { lat: null, lng: null, shops: '' } } render() { const { classes } = this.props const shops = Array.from(this.state.shops) const center = { lat: this.state.lat, lng: this.state.lng } // TODO: いいねボタン return ( <div className={classes.root}> <div className={classes.toolbar} /> <div className={classes.titleArea}> <h2 className={classes.title}>周辺のお店</h2> <Link to="/" className={classes.link}><Button className={classes.btn} startIcon={<Replay />} variant="outlined" color="primary">やり直す</Button></Link> </div> <div className={classes.map}> <GoogleMapReact bootstrapURLKeys={{ key: '***********' }} center={center} defaultZoom={14} yesIWantToUseGoogleMapApiInternals > {/* 現在地 */} <Me lat={this.state.lat} lng={this.state.lng} /> {/* 店にピンを挿す */} {shops.map((shop, i) => ( <Pin key={i} lat={shop.lat} lng={shop.lng} /> ))} </GoogleMapReact> </div> <h2 className={classes.shopListTitle}>お店一覧</h2> <div className={classes.cards}> {/* 店の情報を一覧表示 */} {shops.map((shop, i) => ( <Card className={classes.card} key={i}> <CardMedia className={classes.media} image={shop.logo_image} title="Contemplative Reptile" /> <CardContent> <h2><a href={shop.urls.pc} target="_blank" className={classes.cardTitle}>{shop.name}</a></h2> <p>ー {shop.genre.catch} ー</p> <table className={classes.infoTable}> <thead> <tr><td className={classes.info}>アクセス</td><td className={classes.info}>{shop.access}</td></tr> </thead> <tbody> <tr><td className={classes.info}>平均予算</td><td className={classes.info}>{shop.budget.average}</td></tr> <tr><td className={classes.info}>飲み放題</td><td className={classes.info}>{shop.free_drink}</td></tr> <tr><td className={classes.info}>食べ放題</td><td className={classes.info}>{shop.free_food}</td></tr> <tr><td className={classes.info}>最大人数</td><td className={classes.info}>{shop.party_capacity}人</td></tr> <tr><td className={classes.info}>駐車場</td><td className={classes.info}>{shop.parking}</td></tr> <tr><td className={classes.info}>open</td><td className={classes.info}>{shop.open}</td></tr> </tbody> </table> </CardContent> <CardActions> <Button size="small"> <a href={shop.urls.pc} target="_blank" className={classes.more}>Show More</a> </Button> </CardActions> </Card> ))} </div> </div> ) } componentDidMount() { navigator.geolocation.getCurrentPosition(pos => { this.setState({ lat: pos.coords.latitude, lng: pos.coords.longitude }) const http = axios.create({ baseURL: 'http://localhost:8000/api/gourmet', timeout: 2000, }) this.props.actions.httpRequest() // TODO: 関数化? const getGourmet = async () => { try { const response = await http.get('', { params: { range: 3, order: 4, lat: pos.coords.latitude, lng: pos.coords.longitude, party_capacity: `${this.props.QuestionsReducer.people}`, budget: `${this.props.QuestionsReducer.budget}`, free_food: `${this.props.AmountReducer.freeFood}`, free_drink: `${this.props.AmountReducer.freeDrink}`, genre: `${this.props.QuestionsReducer.genre}` } }) this.setState({ shops: response.data.results.shop }) console.log(response.data.results.shop) } catch (error) { console.log(error) } } getGourmet() this.props.actions.httpSuccess() }, err => { this.props.actions.httpFailure() console.log(err) }) } } const mapStateToProps = state => ({ QuestionsReducer: state.QuestionsReducer, AmountReducer: state.AmountReducer, HttpReducer: state.HttpReducer }) const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actions, dispatch) }) const styledResult = withStyles(styles, { withTheme: true })(Result) export default connect(mapStateToProps, mapDispatchToProps)(styledResult)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。