症状

首次加载正常
刷新后地图不显示提示 AMap is not defined
依据其他帖子使用window.AMap，依旧不得行

诊断

npm安装配置在main（这个配置刷新不出地图），即需要做如果刷新找不到AMap对象就重新异步请求

用药

步骤1：

新建一个amap.js放在utils中（依据个人喜好，工具js放哪就哪）

步骤2：

把main.js的下面代码复制到amap.js，

最终amap.js如下：

/** 异步创建script标签*/
export default function MapLoader() {return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AMap)} else {var url ='https://webapi.amap.com/maps?v=1.4.15&key=高德key&callback=onLoad'var script = document.createElement('script')script.charset = 'utf-8'script.src = urlscript.onerror = rejectdocument.head.appendChild(script)}window.onLoad = () => {resolve(window.AMap)}})
}

步骤3

DOM调用

import MapLoader from '@/utils/amap'

mounted() {let _this=this// 初始化地图对象，加载地图MapLoader().then(aMap => {// console.log('%地图异步加载成功%')AMap = aMapsetTimeout(() => {_this.getMap()}, 300)})
},

疗效

以上刷新的问题就解决了，高德地图使用业务逻辑和题目无关就不详细展示了

下面是给省市区增加范围高亮，保留AMap的plugin的写法

/** 异步创建script标签*/
import AMap from 'vue-amap';
export default function MapLoader() {return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AMap)} else {// 初始化vue-amapAMap.initAMapApiLoader({// 插件集合 （插件按需引入）plugin: ["AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.DistrictSearch", //行政区查询"AMap.Polyline", //行政区查询"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置],v: '1.4.15'});var url ='https://webapi.amap.com/maps?v=1.4.15&key=d4a8a1d41e8361788ae3ff546e854f7b&callback=onLoad'var script = document.createElement('script')script.charset = 'utf-8'script.src = urlscript.onerror = rejectdocument.head.appendChild(script)}window.onLoad = () => {resolve(window.AMap)}})
}

终了

vue-amap高德地图刷新空白高德刷新提示 AMap is not defined解决相关推荐

高德地图轨迹PHP,高德地图JSAPI轨迹重复绘制
介绍一个基于高德地图JSAPI轨迹展示案例: 说明: 1.定时接口取数据刷新轨迹: 2.轨迹坐标数量较大: 3.轨迹点位信息需要展示,如时间.速度.多少点位: 4.避免地图重新渲染,只刷新坐标: 使用 ...
js 跳转到指定位置高德地图_JS引入高德地图定位
在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery) 2准备工作(封装方法,以便直接调用) -2.2封装超时方法($.timeOut-参考) -2.3封装异步调用地图的方法 / ...
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
踩坑记录:最近项目中用到了@vuemap/vue-amap高德地图组件,正常配置完成后,引入官方示例,地图正常出现,可以正常编译不出错,但是代码提示给我整了个这. 于是,开始查资料,为什么会出现这个情 ...
Vue Echarts英文版地图——强大的高德地图
一.安装插件 npm install echarts --savenpm install echarts-extension-amap --save 二.引入使用在index.html中导入从高德地 ...
js添加多marker 高德地图_web开发如何使用高德地图API（四）通过AMap.Marker自定义标点...
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 准备工作: 首先,注册开发者账号,成为高德开放平台开发者 ...
vue 高德地图多边形_Vue + 高德地图画矢量图
功能需求引入并创建地图支持鼠标工具鼠标画矢量图(线.圆.矩形.多边形) 支持矢量图编辑.获取各点经纬度及求面积等操作自定义鼠标右键事件一图胜千言,效果图如下创建地图对象 //DOM加载后动 ...
vue 高德地图多边形_高德地图只显示部分地区遮罩其他地区(vue)
mounted() { this.$nextTick(()=>{ this.initmap(); this.init1("新疆"); }); }, initmap() { / ...
android 高德地图 lbstraceclient,安卓高德地图定位篇-（1）
安卓高德地图定位.先看效果图: STEP1: 先去高德开放平台注册账号,这个不用多说吧网址:https://lbs.amap.com/ 之后再去控制台-应用管理找到自己的key,如下图所示 STEP ...
android高德地图demo,Android :高德地图demo
高德的账号去改的开房平台进行注册,注册成功后进入个人中心; 进入个人中心后点击应供管理 //这里可以随便写获取SHA1码需要的权限有清单文件中 sourceSets { main { jniLi ...

vue-amap高德地图刷新空白高德刷新提示 AMap is not defined解决

症状

诊断

用药

步骤1：

步骤2：

步骤3

疗效

vue-amap高德地图刷新空白高德刷新提示 AMap is not defined解决相关推荐

最新文章

热门文章

vue-amap高德地图刷新空白 高德刷新提示 AMap is not defined解决

症状

诊断

用药

步骤1：

步骤2：

步骤3

疗效

vue-amap高德地图刷新空白 高德刷新提示 AMap is not defined解决相关推荐

最新文章

热门文章

vue-amap高德地图刷新空白高德刷新提示 AMap is not defined解决

vue-amap高德地图刷新空白高德刷新提示 AMap is not defined解决相关推荐