一、申請key###

點(diǎn)擊下邊的網(wǎng)址，創(chuàng)建應(yīng)用，然后申請key，后期要用到，如果已經(jīng)有key，忽略這一步 http://lbs.amap.com/dev/key/app

二、調(diào)用高德地圖

首先在index.html中加入如下引用

   <script src="https://webapi.amap.com/maps?v=1.4.8&key=第一步申請的key"></script>
    <!--引入U(xiǎn)I組件庫（1.0版本） -->
    <script src="https://webapi.amap.com/ui/1.0/main.js"></script>

image.png

三、添加配置

在build/webpack.base.conf.js 加入如下配置

  externals: {
    'AMap': 'AMap',          
    'AMapUI':'AMapUI'
  },

image.png

新建一個map.vue 文件

在javascript標(biāo)簽中引入

   import AMap from 'AMap'

編寫頁面

<template>
    <div>
      <div id="map-container"  style="width: 100%;height: 600px"> </div>
      地圖展示
    </div>
</template>

<script>

 import AMap from 'AMap'

    export default {
        name: "map.vue",
        mounted() {
          this.init()
        },
        methods:{
          init(){
            const map = new AMap.Map('map-container', {
              zoom: 11,
              center:[116.397428,39.90923],
              viewMode:'3D'
            })
            map.plugin(['AMap.ToolBar', 'AMap.MapType'], function () {
              map.addControl(new AMap.ToolBar())
              map.addControl(new AMap.MapType({showTraffic:false,showRoad:false}))
            })

          }
        }
    }
</script>

<style scoped>
</style>

image.png

****也可以使用 vue-amap插件

官方文檔地址：https://elemefe.github.io/vue-amap/#/?id=vue-amap-%e5%9f%ba%e4%ba%8e-vue-2x-%e4%b8%8e%e9%ab%98%e5%be%b7%e7%9a%84%e5%9c%b0%e5%9b%be%e7%bb%84%e4%bb%b6

image.png