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

一、申请key###

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

二、调用高德地图

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

image.png

三、添加配置

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

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

image.png

新建一个map.vue 文件

在javascript标签中引入

   import AMap from 'AMap'

编写页面

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