2018-10-26 umi + dva 集成高德地图

资料查找了半天结果发现很简单，可以节省你一天的时间，直接上干货：
ps：如果你在用umi的话应该知道以下几个文件位置
在.umirc.js中：

export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: false,
        dva: true,
        dynamicImport: {
          webpackChunkName: 'page',
        },
        title: 'xdApp',
        dll: false,
        routes: {
          exclude: [
            /model\.(j|t)sx?$/,
            /service\.(j|t)sx?$/,
            /models\//,
            /components\//,
            /services\//,
          ],
        },
        hardSource: false,
      },
    ],
    ['./plugin.js']//这个就是用来集成高德地图插件的文件
  ],

在根目录新建一个plugin.js文件

export default (api, opts) => {
  api.addHTMLHeadScript({
    type:"text/javascript",
    src: 'https://webapi.amap.com/maps?v=1.4.8&key=你的key',
  });
};

然后就可以在page中轻松加愉快的使用高德地图了

  //界面构造完之后
  var map = new window.AMap.Map('container')//高德地图
  let that=this;
    this.map.plugin('AMap.Geolocation', function() {
      var geolocation = new window.AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: false,
        // 设置定位超时时间，默认：无穷大
        timeout: 1000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new window.AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })

      geolocation.getCurrentPosition()
      window.AMap.event.addListener(geolocation, 'complete', onComplete)
      window.AMap.event.addListener(geolocation, 'error', onError)
      function onComplete (data) {
        // data是具体的定位信息
        const { callback } = that.props.location.query
        callback({
          addressName: data.formattedAddress,
          location: data.position.lng+','+data.position.lat
        })
        router.goBack();
      }

      function onError (data) {
        console.log(data)

        // 定位出错
      }
    })

参考地址：
https://umijs.org/zh/plugin/#%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8
https://umijs.org/zh/plugin/develop.html#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8F%92%E4%BB%B6