vue 引用高德3D地图

js源码

romoteLoad.js

export default function remoteLoad (url, hasCallback) {
  return createScript(url)
  /**
   * 创建script
   * @param url
   * @returns {Promise}
   */
  function createScript (url) {
    let scriptElement = document.createElement('script')
    document.body.appendChild(scriptElement)
    let promise = new Promise((resolve, reject) => {
      scriptElement.addEventListener('load', e => {
        removeScript(scriptElement)
        if (!hasCallback) {
          resolve(e)
        }
      }, false)
     scriptElement.addEventListener('error', e => {
        removeScript(scriptElement)
        reject(e)
      }, false)
      if (hasCallback) {
        window.____callback____ = function () {
          resolve()
          window.____callback____ = null
        }
      }
    })
    if (hasCallback) {
      url += '&callback=____callback____'
    }
    scriptElement.src = url
    return promise
  }
  /**
   * 移除script标签
   * @param scriptElement script dom
   */
  function removeScript (scriptElement) {
    document.body.removeChild(scriptElement)
  }
}

map主页

map.vue

<template>
    <div id="js-container"  :style="{width:'100%',height:'95%'}"></div>
</template>
<script>
import remoteLoad from '@/utils/remoteLoad.js'
  export default {
    props: {},
    components: {},
    data(){
      return {
        AMapUI: null,
        AMap: null
       }
    },
   async created(){
      if(window.AMap && window.AMapUI){
          this.init()
      }else{
          await remoteLoad(`http://webapi.amap.com/maps?v=1.4.15&key=2d00cf810203e90c91261b1ae4ebacdd`),
          await remoteLoad(`http://webapi.amap.com/ui/1.1/main.js`)
          await this.init()
      }
    },
    methods: {
      init(){
            let AMapUI = this.AMapUI = window.AMapUI
            console.log('AMapUI',AMapUI)
            let AMap = this.AMap = window.AMap
            AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
                let mapConfig = {
                    zoom: 16,
                    pitch:75,//
                    resizeEnable: true,
                    viewMode:'3D',//开启3D视图,默认为关闭
                    buildingAnimation:true,//楼块出现是否带动画
                    center: [118.767413,32.041544]
                }
                let map = new AMap.Map('js-container', mapConfig)
            AMap.plugin(['AMap.ToolBar'], function () {
                map.addControl(new AMap.ToolBar({
                    position: 'RB'
                }))
            })
        })
        }
    }
  }
</script>
<style lang="scss" scoped>
  .map{
    width: 500px;
    height: 300px;
  }
</style>

运行结果

image.png