vue3.0搭建项目+map地图

标签：scale   use   ade   地图   安装   tip   cal   mic   脚手架   

1. 进入目录，搭建cli脚手架：npm install -g @vue/cli

2. 启动GUI界面：vue ui

3. 根据所选新建项目

4. 安装地图组件：npm install vue-amap --save

5. main.js入口文件：

import Vue from ‘vue‘
import VueAMap from ‘vue-amap‘;
import App from ‘./App.vue‘

Vue.config.productionTip = false;

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: ‘your amap key‘,
  plugin: [‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘],
  // 默认高德 sdk 版本为 1.4.4
  v: ‘1.4.4‘
});

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

6. 在页面中加入地图部分

<div class="amap-wrapper">
    <el-amap class="amap-box" :vid="‘amap-vue‘"></el-amap>
</div>

样式如下：

.amap-wrapper {
    width: 1400px;
    height: 700px;
    margin-left: 35px;
}

7.效果如下：

vue3.0搭建项目+map地图

标签：scale   use   ade   地图   安装   tip   cal   mic   脚手架   

原文地址：https://www.cnblogs.com/jiazhi88/p/11577048.html