React中引入原生高德地图

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

引入

官网说的很简单，直接在index.html文件里引入一个

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

配置

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

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

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

调用

  componentDidMount(){
      let map = new window.AMap.Map('container')
    }
    ...
 

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