vue项目使用高德地图时报错:AMap is not defined解决办法
更新时间:2023年12月04日 11:19:36 作者:前端-文龙刚
这篇文章主要给大家介绍了关于vue项目使用高德地图时报错:AMap is not defined的解决办法,"AMap is not defined"是一个错误提示,意思是在代码中没有找到定义的AMap,需要的朋友可以参考下
场景:
最近在使用高德地图做轨迹回放的时候,遇到一个BUG,提示:AMap is not defined,大概就是没找到你定义的AMap
网上找了很久,比如什么js加载顺序问题
还有说要设置
统统试了,都没用!!!
解决办法:
既然说加载顺序的问题,那就在初始化的时候,给加个延迟吧
结果发现好了!!!
我这种投机取巧的方式也许没有彻底解决问题,目前没找到更好的办法,希望各位大神指点指点
下面是整个页面的完整代码
<template> <div> <div id="container"></div> <div class="input-card"> <h4>轨迹回放控制</h4> <div class="input-item"> <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" /> <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" /> </div> <div class="input-item"> <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" /> <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" /> </div> </div> </div> </template> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的key"></script> <script> //请求路径 //import { //playbacklist, //} from "@/api/obd/playback"; export default { mounted() { this.initMap(); }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); this.timer = null; this.map && this.map.destroy(); } }, data() { return { map: null, marker: null, lineArr: [ [118.478939, 39.997768], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861] ] }; }, methods: { initMap() { setTimeout(()=>{ var that = this that.map = new AMap.Map("container", { resizeEnable: true, center: [108.478939, 39.997768], zoom: 17 }); that.marker = new AMap.Marker({ map: that.map, position: [118.478939, 39.997768], icon: "https://webapi.amap.com/images/car.png", offset: new AMap.Pixel(-26, -15), autoRotation: true, angle: -90 }); // 绘制轨迹 var polyline = new AMap.Polyline({ map: that.map, path: that.lineArr, showDir: true, strokeColor: "#28F", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6 //线宽 // strokeStyle: "solid" //线样式 }); var passedPolyline = new AMap.Polyline({ map: that.map, // path: this.lineArr, strokeColor: "#AF5", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6 //线宽 // strokeStyle: "solid" //线样式 }); this.marker.on("moving", function (e) { passedPolyline.setPath(e.passedPath); }); this.map.setFitView(); },800) }, startAnimation() { this.marker.moveAlong(this.lineArr, 200); }, pauseAnimation() { this.marker.pauseMove(); }, resumeAnimation() { this.marker.resumeMove(); }, stopAnimation() { this.marker.stopMove(); } } }; </script> <style scoped> #container { height: 1000px; width: 100%; } .input-card .btn { margin-right: 1.2rem; width: 9rem; } .input-card .btn:last-child { margin-right: 0; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; background-color: transparent; background-image: none; color: #25A5F7; border-color: #25A5F7; padding: .25rem .5rem; line-height: 1.5; border-radius: 1rem; cursor:pointer; } .input-item { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; height: 3rem; } .input-card { display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border-radius: .25rem; width: 22rem; border-width: 0; border-radius: 0.4rem; box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5); position: fixed; bottom: 1rem; right: 1rem; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0.75rem 1.25rem; } </style>
总结
到此这篇关于vue项目使用高德地图时报错:AMap is not defined解决办法的文章就介绍到这了,更多相关vue高德地图报错AMap is not defined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vite2打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03
最新评论