页面刷新后，地图组件会报错

[rocketsbigfan]

问题

作者您好，我在使用vue-amap时，页面停留在含组件页面时，发现在浏览器中按f5会报 v.w.uh is not a constructor，组件仅能加载出来背景，但通过页面菜单路由跳转没有这个问题， 请问作者，这个问题有好的解决方法吗

VueAMap 版本

^0.5.8

OS/Browsers version

Google Chrome 70.0.3538.102

Vue 版本

^2.5.10

预期

希望页面刷新时不会报这个错误

实际

feature request

[rocketsbigfan]

之前问题以为解决了，现在又出现了，头有点疼

[Leega0]

今天偶然解决了这个问题，如果你没用到别的本地存储，加载完地图后 localStorage.clear();

[jackycaojiaqi]

这个问题 貌似前面也有 #428 希望作者大大看到后能够重视下 。辛苦啦

[DollsMaster]

刚刚也出现了这个问题，根据上面几位的思路排查了一下，最后发现如果在main.js初始化的时候不加载plugin，的话不会再出现这个错误. VueAMap.initAMapApiLoader({ key: '', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], v: '1.4.4' }); 应该是地图重新加载的时候，某个插件在localStorage中重复添加出问题了。

[panyu97py]

今天偶然解决了这个问题，如果你没用到别的本地存储，加载完地图后 localStorage.clear();

你这个方法确实可以解决这个问题 但这个解决方案有点治标不治本啊

[panyu97py]

刚刚也出现了这个问题，根据上面几位的思路排查了一下，最后发现如果在main.js初始化的时候不加载plugin，的话不会再出现这个错误. VueAMap.initAMapApiLoader({ key: '', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], v: '1.4.4' }); 应该是地图重新加载的时候，某个插件在localStorage中重复添加出问题了。

如果只是在plugin数组中增加一个插件就不会出现这个错误但只要数量大于等于2就会报错

[aberson-xie]

我在初始化地图时也报错了,报这个错，v.w.uh is not a constructor，后面刷新和跳转都ok了. 原因应该是加载地图插件时是异步处理的，插件还没加载完，就加载地图了，所以初始化会报错，望大神提供解决方案，个人对vue-amap不是很熟。

[Arisor]

我试了一下，再main.js里这样写就没问题了 setTimeout(() => { localStorage.clear() Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德的key key: '##################################', // 插件集合 plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'] }); }, 0)

[aberson-xie]

初始化地图使用AMap.initAMapApiLoader({ // 高德的key key: '##################################', // 插件集合 plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'] }); }, 0)，紧接着使用lazyAMapApiLoaderInstance.load()加载地图就没报错了，不论初始化还是刷新跳转都没问题了，只是感觉地图加载的有些慢。之前出问题，是因为AMap.initAMapApiLoader只用了一次，每次都是使用lazyAMapApiLoaderInstance.load()加载地图，应该是异步导致插件没有加载好就开始初始化地图了。

@Arisor 你这样写不是每次都要重新加载地图和插件，建议你可以用户登出的时候清除localStorage,然后在页面增加个常量用来判断地图是否加载过，加载过就不需要重新加载了，直接使用即可。

[Arisor]

@aberson-xie 我遇见的问题是每次f5刷新的时候都会出现那个报错

[aberson-xie]

@Arisor 你这个问题，我没遇到过，我的是初始化加载地图会报错，后面刷新和路由跳转都没问题。 你可以看看f5刷新后，地图的加载流程。

[DudeYouth]

util.clearAMapStorage = function () { let i = 0; while (i < 1000) { let key = window.localStorage.key(i); if (key === undefined || key === null) { break; } else if (/^AMap/.test(key)) { window.localStorage.removeItem(key); } i++; } }; 我这样解决了

[Arisor]

@aberson-xie 大佬，怎么才能改变marker的颜色

[aberson-xie]

@Arisor marker是指地图加的图标吗？记得高德有new AMap.Marker()的构造方法,可以设置icon的。你可以同一图标弄几个颜色，然后切换图标，就达到了改变颜色的效果了。

[Arisor]

谢谢大佬，我找到其他方案解决了

------------------ 原始邮件 ------------------ 发件人: "aberson-xie"[email protected]; 发送时间: 2019年4月30日(星期二) 下午5:12 收件人: "ElemeFE/vue-amap"[email protected]; 抄送: "Arisor"[email protected]; "Mention"[email protected]; 主题: Re: [ElemeFE/vue-amap] 页面刷新后，地图组件会报错 (#472)

@Arisor marker是指地图加的图标吗？记得高德有new AMap.Marker()的构造方法,可以设置icon的。你可以同一图标弄几个颜色，然后切换图标，就达到了改变颜色的效果了。

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[aberson-xie]

@Arisor 好的！！！

[ttylikl]

确切的说是eval localstorage里 _AMap_raster 项里的脚本的时候出的错，如果不能接受clearStorage的话，单单删除这一项也行。

[Respect-M]

setTimeout(()=>{ localStorage.removeItem('_AMap_raster'); Vue.use(VueAMap); },0);

[thehead]

试了很多方式都没有根治此问题，后来发现在网络慢的时候触发报错几率高，用如下方法可以解决，希望能帮助同样被困惑的同学 `VueAMap.initAMapApiLoader({ key: 'yourKey', plugin: ['yourPlugin'], v: '1.4.4' });

lazyAMapApiLoaderInstance.load().then(()=>{ localStorage.removeItem('_AMap_raster'); Vue.use(VueAMap); });`

[dearMOMO]

试了很多方式都没有根治此问题，后来发现在网络慢的时候触发报错几率高，用如下方法可以解决，希望能帮助同样被困惑的同学 `VueAMap.initAMapApiLoader({ key: 'yourKey', plugin: ['yourPlugin'], v: '1.4.4' });

lazyAMapApiLoaderInstance.load().then(()=>{ localStorage.removeItem('_AMap_raster'); Vue.use(VueAMap); })

试了很多方式都没有根治此问题，后来发现在网络慢的时候触发报错几率高，用如下方法可以解决，希望能帮助同样被困惑的同学 `VueAMap.initAMapApiLoader（{ key：'yourKey'， 插件： ['yourPlugin']， v：'1.4.4' }）;

lazyAMapApiLoaderInstance.load（）。then（（）=> { localStorage.removeItem（'_ AMap_raster'）; Vue.use（VueAMap）; }）;`

哥，我试了你的方法，但是不行呀

[ycycorona]

试了很多方式都没有根治此问题，后来发现在网络慢的时候触发报错几率高，用如下方法可以解决，希望能帮助同样被困惑的同学 `VueAMap.initAMapApiLoader({ key: 'yourKey', plugin: ['yourPlugin'], v: '1.4.4' }); lazyAMapApiLoaderInstance.load().then(()=>{ localStorage.removeItem('_AMap_raster'); Vue.use(VueAMap); })

试了很多方式都没有根治此问题，后来发现在网络慢的时候触发报错几率高，用如下方法可以解决，希望能帮助同样被困惑的同学 VueAMap.initAMapApiLoader（{ key：'yourKey'， 插件： ['yourPlugin']， v：'1.4.4' }）; lazyAMapApiLoaderInstance.load（）。then（（）=> { localStorage.removeItem（'_ AMap_raster'）; Vue.use（VueAMap）; }）;

哥，我试了你的方法，但是不行呀

// 高德地图

const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))

amapKeys.forEach(key => {
  // console.log(key)
  localStorage.removeItem(key)
})

Vue.use(VueAMap)

试试吧

[wuyou91]

在初始化前加上如下代码： setTimeout(()=>{ localStorage.removeItem('_AMap_raster'); Vue.use(VueAMap); },0);

可以解决，但不完美，刷新时页面会出现一次抖动，出现一瞬间的侧边滚动条。

[LanYu4qz]

Uncaught (in promise) TypeError: a[d].split is not a function at c.plugin (maps?key=210455e6bdaa99bb90673078146f87fe&v=1.4.15&plugin=AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.Scale,Scale,AMap.OverView,OverView,AMap.ToolBar,ToolBar,AMap.MapType,MapType,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor,AMap.Geolocation,Geolocation,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:205)

我是报这个 刷新插件加载失败

[rhaegarli-en]

Uncaught (in promise) TypeError: a[d].split is not a function at c.plugin (maps?key=210455e6bdaa99bb90673078146f87fe&v=1.4.15&plugin=AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.Scale,Scale,AMap.OverView,OverView,AMap.ToolBar,ToolBar,AMap.MapType,MapType,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor,AMap.Geolocation,Geolocation,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:205)

我是报这个 刷新插件加载失败

请问解决了吗

[huffmanX]

Uncaught (in promise) TypeError: a[d].split is not a function at c.plugin (maps?key=210455e6bdaa99bb90673078146f87fe&v=1.4.15&plugin=AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.Scale,Scale,AMap.OverView,OverView,AMap.ToolBar,ToolBar,AMap.MapType,MapType,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor,AMap.Geolocation,Geolocation,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:205) 我是报这个 刷新插件加载失败

请问解决了吗

解决了吗

[myPirlo]

我是在页面刷新的时候遇到 AMap.CircleEditor 加载失败的问题, 最后在组件上写了一个v-if ，但后给个定时器过一会儿再改成true就解决了....（野路子）

[jianzi0307]

使用vue-amap的路由如果是懒加载会一定几率导致插件加载失败

[jianzi0307]

Uncaught (in promise) TypeError: a[d].split is not a function at c.plugin (maps?key=210455e6bdaa99bb90673078146f87fe&v=1.4.15&plugin=AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.Scale,Scale,AMap.OverView,OverView,AMap.ToolBar,ToolBar,AMap.MapType,MapType,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor,AMap.Geolocation,Geolocation,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:205)

我是报这个 刷新插件加载失败

使用amap的路由不要使用懒加载，我是这么解决的

{
    path: "/page1",
    name: "page1",
    component:  Page1, 
    
    // 路由懒加载，高德地图会出现一定几率插件加载失败导致白屏
    // component: () => import(/* webpackChunkName: "Page1" */ '@/views/pages/Page1')
  },