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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Q&A

解決済

1回答

1092閲覧

vue.jsで現在地取得してgooglemapの中心にしたい

qooo

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

0グッド

1クリップ

投稿2019/12/13 04:15

ライフサイクルの問題なのか現在地が中心になりません。
検証ツールで見たら現在地を取得できている模様です。
どなたか教えてください。

vue

1<template> 2 <div> 3 <div :id="mapName" class="googleMap"></div> 4 </div> 5</template> 6 7<script> 8 export default{ 9 data(){ 10 return{ 11 mapName:'map', 12 element: null, 13 map:null, 14 center: {lat:35.690218, lng:139.700592}, 15 latlng: null, 16 mapOptions: null, 17 label: null, 18 } 19 }, 20 21 created: function(){ 22 if (process.client) { 23 if (!navigator.geolocation) { 24 alert('現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。') 25 return 26 } 27 28 const options = { 29 enableHighAccuracy: false, 30 timeout: 5000, 31 maximumAge: 0 32 } 33 34 navigator.geolocation.getCurrentPosition(this.success, this.error, options) 35 } 36 }, 37 38 39 mounted(){ 40 this.$nextTick(function () { 41 this.element = document.getElementById(this.mapName) 42 // this.latlng = new google.maps.LatLng(34.724888, 135.500612) 43 this.mapOptions = { 44 zoom: 17, //表示時の地図の大きさ 45 center: {lat:this.center.lat,lng:this.center.lng}, //表示時の地図の中心座標 46 gestureHandling: 'greedy', 47 scaleControl: false, 48 mapTypeControl: false, 49 zoomControl: false, 50 streetViewControl: false, 51 fullscreenControl: false, 52 } 53 this.map = new google.maps.Map(this.element, this.mapOptions) 54 this.label = { 55 color: 'rgb(231, 222, 202)', //色 56 fontFamily: 'Myfont', //フォント指定 57 fontSize: '13px', //フォントのサイズ指定 58 fontWeight: 'bold' //文字の太さ 59 } 60 }) 61 }, 62 63 methods:{ 64 success (position) { 65 this.center.lat = position.coords.latitude 66 this.center.lng = position.coords.longitude 67 }, 68 error (error) { 69 switch (error.code) { 70 case 1: //PERMISSION_DENIED 71 alert('位置情報の利用が許可されていません') 72 break 73 case 2: //POSITION_UNAVAILABLE 74 alert('現在位置が取得できませんでした') 75 break 76 case 3: //TIMEOUT 77 alert('タイムアウトになりました') 78 break 79 default: 80 alert('現在位置が取得できませんでした') 81 break 82 } 83 }, 84 }, 85 } 86</script> 87<style> 88 .googleMap { 89 height: 500pt; 90 width: 100%; 91 z-index: 2 !important; 92 } 93 </style> 94

ありがとうございます。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

geolocationは非同期処理なのでmountedタイミング時にはまだ処理が終わってないのではないですか?
以下のようにPromiseを返すように取得処理を作成して完了するのを待つのが良さそうです。

js

1export default { 2 async mounted(){ 3 this.$nextTick(() => { 4 try { 5 const position = await this.getCurrentPosition() 6 this.center.lat = position.coords.latitude 7 this.center.lng = position.coords.longitude 8 } catch (error) { 9 alert(error) 10 } 11 }) 12 }, 13 methods:{ 14 getCurrentPosition() { 15 return new Promise((resolve, reject) => { 16 const message = [ 17 '現在位置が取得できませんでした', 18 '位置情報の利用が許可されていません', 19 '現在位置が取得できませんでした', 20 'タイムアウトになりました', 21 '現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。' 22 ] 23 if (window.navigator.geolocation) { 24 window.navigator.geolocation.getCurrentPosition( 25 response => { 26 resolve(response) 27 }, 28 error => { 29 reject(message[error.code]) 30 }, 31 { 32 enableHighAccuracy: false, 33 timeout: 5000, 34 maximumAge: 0 35 } 36 ) 37 } else { 38 reject(message[4]) 39 } 40 }) 41 } 42 } 43}

投稿2019/12/13 05:46

nt4c

総合スコア768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問