vue.js导入高德地图

最新推荐文章于 2024-05-14 11:31:24 发布

Summer_i

最新推荐文章于 2024-05-14 11:31:24 发布

阅读量4.9k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/Summer_i/article/details/73826102

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.第一步 npm 安装 vue-amap

 
 npm install vue-amap --save 

2.在 main.js 中引入高德地图

 
 import 
 AMap 
 from 
 'vue-amap'; 

3.在main.js 中加入

 
 Vue. 
 use( 
 AMap); 

 
   // 初始化vue-amap 
  
   AMap. 
   initAMapApiLoader({ 
  
   // 申请的高德key 
  
   key: 
   'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
  
   // 插件集合 
  
   plugin: [ 
   'AMap.Autocomplete', 
   'AMap.PlaceSearch', 
   'AMap.Scale', 
   'AMap.OverView', 
   'AMap.ToolBar', 
   'AMap.MapType', 
   'AMap.PolyEditor', 
    'AMap.CircleEditor'] 
  
    });

4.显示地图

<el-amap 
    vid= 
    "amap" 
    :zoom=" 
    zoom" 
    :amap-manager=" 
    amapManager" 
    :center=" 
    center" 
   
 
    ref= 
    "map" 
   
 
    class= 
    "amap-demo" 
   
>
 
  </ 
  el-amap 
  > 
 

5.vue 代码

 
  import 
  VueAMap 
  from 
  "vue-amap"; 
 
  let 
  amapManager = 
  new 
  VueAMap. 
  AMapManager(); 
 
   export 
    default{ 
  
     data () { 
    
     return { 
    
     zoom: 
     10, 
    
     center: [ 
     116.383798, 
     39.908315], 
    
     amapManager: 
     amapManager, 
    
     } 
    
   }