有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue引入原生高德地图运行出现 error ‘AMap’ is not defined no-undef

vue 炮渣日记 1个月前 (11-06) 103次浏览 已收录 0个评论 扫描二维码

运行vue项目里面使用高德地图插件报错

error ‘AMap’ is not defined no-undefn

只需要配置 eslintrc.js里面加上

globals: {
    AMap: true,
    AMapUI:true
 }

然后重新 npm run dev 即可 报错消失

如果还不好?

1. index.html

注意,引入的高德js一定要放在头部而不是尾部,否则就会报 “AMap is not defined”。这个坑我踩了好久!网上找了其他文章也都都没有提到这一点。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>
  </head>复制代码

2. webpack.base.conf.js

在module.exports = {}里加入

externals: {
  'AMap': 'AMap'
},复制代码

3. 引用高德的那个页面

<template>
  <div class="hello">
    <div style="height:500px" id="container" tabindex="0"></div>
  </div>
</template>

<script>
import AMap from 'AMap'
</script>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址