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

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

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

ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

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}