vue-cli3.0引入高德地图3d效果两种方法+实例+填坑

前言：

        因为项目需要引入高德地图的3d效果，找了很多资料，在这里记录下方法和实例组件

***注意：

因为两个方法代码量都特别大，这里分2个页面详细说一下，方法一是链接出去专门说，最下面有更多资料，高德3d官网地址和别的资料地址

方法一：使用官方案例，这里提供两个实例，一个是vue-cli3.0使用，一个是直接用html引入实现效果

效果：

详细demo入口：https://blog.csdn.net/qq_41619796/article/details/102968589

 

方法二：使用vue-amap来实现，这个方法在这里详细说一下

实现效果：

实现步骤：

1、安装：

npm i vue-amap

2、单个组件使用配置：

***注意：我在main.js中配置了，不是VueAMap这个方法报错，就是initAMapApiLoader这个初始化方法报错，只能放在单独组件这里才能生效，目前尚未找到原因

import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)

3、js中配置方法：

created() {
    this.initMapData();
  },

  methods: {
    initMapData(){
       VueAMap.initAMapApiLoader({
　　　　　　// 高德的key
　　　　　　 key: '6e891db894fab1a0cc515f88857e47fd',
　　　　　　// 插件集合
　　　　　　plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
        'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
           uiVersion: '1.0.11', // 版本号
              
              resizeEnable: true,
              rotateEnable:true,
              pitchEnable:true,
              zoom: 17,
              pitch:80,
              rotation:-15,
              viewMode:'3D',//开启3D视图,默认为关闭
              buildingAnimation:true,//楼块出现是否带动画

              expandZoomRange:true,
              zooms:[3,20],
              center:[116.333926,39.997245]
　　　　})
    }
  }

4、页面调用部分：

<el-amap vid="amapDemo"></el-amap>

实现完整组件：gd_timeT_map.vue  ***温馨提示：安装完直接加载就可以看到效果

<template>
  <div class="mapDiv">
    <el-amap vid="amapDemo"></el-amap>
 </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
export default {
  props: {

  },
  data () {
    return {

    };
  },

  components: {},

  computed: {},

  created() {
    this.initMapData();
  },

  mounted() {

  },

  methods: {
    initMapData(){
       VueAMap.initAMapApiLoader({
　　　　　　// 高德的key
　　　　　　 key: '6e891db894fab1a0cc515f88857e47fd',
　　　　　　// 插件集合
　　　　　　plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
        'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
           uiVersion: '1.0.11', // 版本号
              
              resizeEnable: true,
              rotateEnable:true,
              pitchEnable:true,
              zoom: 17,
              pitch:80,
              rotation:-15,
              viewMode:'3D',//开启3D视图,默认为关闭
              buildingAnimation:true,//楼块出现是否带动画

              expandZoomRange:true,
              zooms:[3,20],
              center:[116.333926,39.997245]
　　　　})
    }
  },

  watch: {}
}

</script>
<style lang='less' scoped>
  .mapDiv{
    width:100%;
    height: 500px;
  }
</style>

更多资料：

1、https://lbs.amap.com/api/javascript-api/example/3d/map3d   高德3d官网

2、https://blog.csdn.net/qq_24147051/article/details/84763265  另一个使用vue-amap 更加详细的大神地址