vue3.0搭建项目+map地图

Posted 2022-11-27 jiazhi88

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.效果如下：