vue 引入高德地图 echarts

一 vue 引入echarts

---

官网提供步骤： http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

1.npm安装

   npm install echarts --save

2. // main.js  引入echarts

import echartsfrom 'echarts'

Vue.prototype.$echarts = echarts;

3.map.vue

二.vue 使用高德地图

---

   vue安装vue-amap

npm安装

npm install vue-amap --save

CDN

目前可通过unpkg.com/vue-amap获取最新版本的资源。

main.js引入vue-amap

// 引入高德地图

import AMap from 'vue-amap';

Vue.use(AMap);

AMap.initAMapApiLoader({

    key: 'c573541ee962147adc05c894114ba8ea',//刚刚开发者申请哪里的key

    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']

});

3.组件里调用高德地图

需要注意：一定要设置宽高，不然地图不会显示。或者给外面套一个div，给div设置宽高也行。

image.png