React中引入原生高德地图

最新推荐文章于 2024-09-13 21:50:34 发布

南乡人

最新推荐文章于 2024-09-13 21:50:34 发布

阅读量2.4k

点赞数 2

分类专栏：前端莫名的报错

本文链接：https://blog.csdn.net/qq_37086982/article/details/96882968

版权

50 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

开篇明义，地图就是巨坑的一个东西。百度因为这个文档实在没法看，遂放弃，高德的文档写的的确详细，可惜就是没有关于这个React，Vue之类框架的使用文档.

官网说的很简单，直接在index.html文件里引入一个<script>标签就可以

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

但是引入后，往往会发现，Amap这个类它不是个构造函数，之类的错误。
其实只要把引入的高德js一定要放在头部[<body>之前]而不是尾部就可以了。。。咱们这个优良的编程习惯都知道把js加载放在最后，结果整这一出（怀疑是加载太慢了，导致最后页面渲染完，这个类没有加进去全局的window里面）

webpack.config.js(如果是用dva框架的话，就找一下.webpackrc)

externals: {
  'AMap': 'AMap'
},

externals选项作用是–从打包的bundle文件中排除依赖。
让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。

  componentDidMount(){
      let map = new window.AMap.Map('container')
    }
    ...
<div style={{width:650,height:255}} id="container"></div>

即可看到地图成功渲染出来

关注

专栏目录