vue-amap的使用

一、效果图

二、安装

第一步：安装
npm install vue-amap --save
第二步：入口main.js文件配置

import VueAMap from "vue-amap";

Vue.use(VueAMap);

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

三、使用

<template>
<div>
 <el-dialog
   title="定位地点"
   :visible.sync="showDialog"
   width="1200px"
   :before-close="handleClose"
   :close-on-click-modal="false"
 >
   <div>
     <el-amap-search-box
       class="search-box"
       :search-option="searchOption"
       :on-search-result="onSearchResult"
     ></el-amap-search-box>
     <el-amap
       class="vueAmap"
       vid="amapEdit"
       :zoom="amap.zoom"
       :center="amap.center"
       :plugin="amap.plugin"
       :events="amap.events"
     >
       <el-amap-marker
         v-for="(marker, index) in amap.markers"
         :key