使用vue-amap 一套专门用于vue的高德地图插件
1.安装 npm install vue-amap -S
2.在main.js中引入
import AMap from ‘vue-amap‘ Vue.use(AMap) // 初始化地图 AMap.initAMapApiLoader({ key: ‘自己的key‘, plugin: [‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘] // 插件集合 })
3.直接引用
<template> <div id="app"> <h3 class="title">{{ msg }}</h3> <div class="amap-wrapper"> <el-amap class="amap-box" :vid="‘amap-vue‘"></el-amap> </div> </div> </template> <script> export default { data () { return { msg: ‘vue-amap向你问好!‘ } } } </script> <style> .amap-wrapper { width: 100%; height: 100%; } </style>