vue使用高德地图Amap未定义问题

    // 引入高德地图
    import VueAMap from 'vue-amap';
 
    Vue.use(VueAMap);
 
 
    // 初始化vue-amap
    VueAMap.initAMapApiLoader({
      // 高德的key
      key: '您申请的高德地图key',
      // 插件集合
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch',             'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',             'AMap.PolyEditor', 'AMap.CircleEditor'],
      // 高德 sdk 版本,默认为 1.4.4
      v: '1.4.4'
    });
    <template>
    <el-amap id="container"></el-amap>
    </template>

    <script>
    import { lazyAMapApiLoaderInstance } from "vue-amap";
      created() {
        lazyAMapApiLoaderInstance.load().then(() => {
          this.initMap();
        });
      },
    methods: {
        initMap() {
      this.map = new AMap.Map("container", {
        center: [117.463316, 40.550095],
        pitch: 50, //俯仰角度
        viewMode: "3D", //使用3D视图
        zoom: 12, //级别
      });
    }
    </script>

w完美解决

posted @ 2022-08-05 14:37    阅读(602)  评论(0编辑  收藏  举报