概要
- 【目的】nuxt.jsでGoogleMapを使いたい
- 前提
- GoogleMap APIを取得済み
- vue2-google-maps 関連サイト
- 環境
- Windows10
- VSCode
- Node v8.11.3
sample Project作成
make nuxt project
> npx create-nuxt-app sample_googlemaps
? Project name sample_googlemaps
? Project description My luminous Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Author name testuser
? Choose a package manager npm
install vue2-google-maps
> npm i vue2-google-maps --save
Nuxt.js configの修正
Plugin読み込み設定
nuxt.config.js
plugins: [
'@/plugins/vuetify',
{src:"~plugins/vue2-google-maps.js"} // 追加
],
build.extend()に下記を追記
nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
-- 略 --
//add for vue2-google-maps
if (!ctx.isClient) {
// This instructs Webpack to include `vue2-google-maps`'s Vue files
// for server-side rendering
config.externals.splice(0, 0, function (context, request, callback) {
if (/^vue2-google-maps($|\/)/.test(request)) {
callback(null, false)
} else {
callback()
}
})
}
venderへの追加
nuxt.config.js
vendor:["vue2-google-maps"]
},
}
pluginの追加
pulugin フォルダにvue2-google-maps.jsを作成
vue2-google-maps.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: '{GoogleMapのAPIキー}',
libraries: 'places',
},
})
画面(Vue)作成
最小限のLayout
layouts/default.vue
<template>
<v-app dark>
<nuxt />
</v-app>
</template>
GoogleMapを表示する画面
page/index.vue
<template>
<v-layout row justify-center align-center>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</v-layout>
</template>
<script>
export default {
data() {
return {
markers: [
{position: { lng: 10.2, lat: 10 }},
{position: { lng: 10.1, lat: 10 }}
]
};
}
};
</script>
サンプル実行結果
npm run dev
現在地の取得
navigator.geolocation.getCurrentPositionを使う
参考：https://syncer.jp/how-to-use-geolocation-api
current.vue
<template>
<div>
<v-btn @click="onClickCurrent" >getCurrentPosition</v-btn>
<p>{{currentLoc.coords}}</p>
<GmapMap class="map-panel" map-type-id="terrain"
style="width: 100%; height: 300px"
:draggable="true"
:center="maplocation"
:zoom="15"
ref="mmm">
<GmapMarker
:position = "maplocation"
/>
</GmapMap>
</div>
</template>
<script>
export default {
data(){
return {
currentLoc:{},
maplocation:{lng: 0, lat: 0}
}
},
methods:{
async onClickCurrent(){
console.log('--onClickCurrent')
try{
let data =await getPosition();
console.log('--success',data)
console.log('typeof', typeof(data))
let data2={};
data2.lat = data.coords.latitude ;
data2.lng = data.coords.longitude ;
data2.alt = data.coords.altitude ;
data2.accLatlng = data.coords.accuracy ;
data2.accAlt = data.coords.altitudeAccuracy ;
data2.heading = data.coords.heading ; //0=北,90=東,180=南,270=西
data2.speed = data.coords.speed ;
// Object.assign(data2,data.coords); // not work
// this.$set(this.currentLoc,"data2",data.coords);//not work
console.log('data2',data2)
this.$set(this.currentLoc,"coords",data2);
//set Googlemap
this.maplocation.lat = data2.lat;
this.maplocation.lng = data2.lng;
this.$refs.mmm.panTo(this.maplocation );
}catch(e){
console.log('--error',e);
}
}
},
}
var getPosition = function (options) {
return new Promise(function (resolve, reject) {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
}
</script>
実行結果省略
（追記）Nuxt upgrade 1.4 -> 2.2 対応
参考
upgrade
>yarn upgrade-interactive --latest
nuxtをチェックしてアップグレードを行う
add core-js package
>yarn add core-js
fix code (nuxtconfg.js)
nuxt.config.js
plugins: [{ src: "~/plugins/vue2-google-maps", ssr: true }],
build: {
transpile: [/^vue2-google-maps($|\/)/]
}