文章详情 - 宏推科技

小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

前言

佛祖保佑，永无bug。Hello 大家好！我是海的对岸！

因我司在尝试三维地图方面的摸索，所以，我这边尝试下用高德地图加载三维地图，特此记录一下

开干，解决过程

因为我是vue开发

首先，需要引入vue-amap，Vue引入vue-amap，看这边，传送门

上篇讲到，vue-amap文档显示不全，需要把vue-amap的文档下载下来，本地跑起来看，怎么本地跑vue-amp文档，看我上一篇写的vue-amap 官方文档显示不全【解决】

步骤1

还需要用到高德地图开发者平台上的高德地图文档，传送门

我们打开高德在线调试界面

New Image

步骤2

再看vue-amap

New Image

看到这里，你会发现，图例让你使用vue-amap的时候，避免使用AMap这个名字，因为这个名字是原生高德SDK的，说明AMap这个在vue项目里面，已经是存在的了

因为我们开发，定制化可能会比较多，使用上会更加贴近原生高德SDK。

New Image

由于地图实例是异步加载的，当使用地图的页面开始加载地图的时候地图还没完成初始化，会造成获取不到地图实例

New Image

直接上代码


js
复制代码
<template>
  <div class="amap-page-container">
    <div id="amap-demo1" class="amap-demo">
    </div>
  </div>
</template>

<script>
  // NPM 方式
  import { lazyAMapApiLoaderInstance } from ''vue-amap'';

  const loadPromise = lazyAMapApiLoaderInstance.load();

  export default {
    data() {
      return {
        map: null
      }
    },
    methods: {
      initMap() {
        loadPromise.then(() => {
          console.log(''-----'');
          this.map = new AMap.Map(''amap-demo1'', {
            center: [120.55538, 31.87532], // 以张家港为例
            zoom: 12,
            resizeEnable: true,
            rotateEnable:true,
            pitchEnable:true,
            pitch:80,
            rotation:-15,
            viewMode:''3D'',//开启3D视图,默认为关闭
            buildingAnimation:true,//楼块出现是否带动画

            expandZoomRange:true,
            zooms:[3,20],
          });
        });
      }
    },
    mounted() {
      this.initMap();
    },
  }
</script>

<style scoped>
  .amap-demo {
    height: 98vh;
    width: 100%;
    resize:both;
  }
</style>