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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容