vue3.0搭建项目+map地图

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

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