vue引入高德地图,老是 import AMap失败

vue引入高德地图,老是 import AMap不了undefined。敢问各位大佬如何解决啊!

首先我在index.html引入了amap.js,之后,我在webpack.base.conf.js文件这样配置的:
module.exports = {

extensions: ['.AMap']

}
最后在组件中引入import AMap from 'AMap',
结果图片描述

阅读 6.6k
2 个回答

怎么引入的,能贴下代码吧

除了楼上说的
1.extensions: ['AMap']
2.要用script标签引入amap的js
还要注意异步的问题,这里贴下我以前网上找的,用的async/await出处忘记了。。

window._polygon = [];//这些玩意用不着放data里
window._markerList = [];

import AMap from 'AMap';  


  async mounted() {
    // 初始化参数
    this.c_center = [
      this.$route.query["lng"] || 121.099038,
      this.$route.query["lat"] || 31.578119
    ];

    await this.initMap();
  },
  methods: {
    initMap() {
      let AMapUI = (this.AMapUI = window.AMapUI);
      let AMap = (this.AMap = window.AMap);//地图对象直接挂到window上
      let mapConfig = {
        zoom: 12,
        center: [121.099038, 31.578119], //沙溪
        crs: "EPSG3857",
        zooms: [10, 20],
        layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
        resizeEnable: true
      };

      window.map = new AMap.Map("amapContainer", mapConfig);

      this.addPlugin(map);
      this.getList(true);
    },
    addPlugin(map) {
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function() {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.MapType());
      });
    },
  }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题