VUE使用地图组件

Posted 2020-12-10 serahuli

vue-amap使用
1、下载：

npm install vue-amap --save

2、使用：(在 main.js中)

import VueAMap from ‘vue-amap‘;
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: ‘YOUR 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‘
});

3、地图中心点： 加图标

<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
    <el-amap-marker :position="[108.386284,21.727592]" :icon="icon"></el-amap-marker>
</el-amap>

// 导入 地点图标覆盖物
import img from ‘../assets/logo.png‘

// data数据
data() {
      return {
        center: [108.386284,21.727592],//地图中心点坐标
        zoom:16,//初始化地图显示层级
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
        icon: l
      }
},

然后就可以啦啦啦啦啦啦