何大小成

nuxt · vue-amap

沒別的,只是想記錄nuxt.js與vue-amap的使用方法,甚至vue-baidumap。

首先,vue-amap是不支持SSR渲染的。這個估計官方也說了。

所以要用一種不走ssr的方法。

之前也試過直接在nuxt.config.js里配置

1
2
3
4
{
src: '~plugins/amap.js',
ssr: false
}

結果發現還是不起效果,還報錯:

read property 'load' of null```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

解決方法就是:
> 很簡單,一個`<no-ssr>`即可。詳情點擊: [這裡](https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component)



代碼:


```html
<no-ssr placeholder="Loading...">
<el-amap
:center="center"
:zoom="zoom"
:scrollWheel="false"
:vid="'amap-vue'">
<el-amap-marker vid="component-marker"
:position="center"></el-amap-marker>
</el-amap>
</no-ssr>