vue2.0使用高德地图第三方插件

一、申请key###

点击下边的网址，创建应用，然后申请key，后期要用到，如果已经有key，忽略这一步 http://lbs.amap.com/dev/key/app

二、调用高德地图

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

   <script src="https://webapi.amap.com/maps?v=1.4.8&key=第一步申请的key"></script>
    <!--引入UI组件库（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标签中引入

   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