使用AMap-vue的一些笔记

 

1.引入依赖

yarn add @amap/amap-vue # 或 npm install --save @amap/amap-vue

2.在main.js里引入

import AmapVue from '@amap/amap-vue';

AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = '您的JSAPI KEY';
AmapVue.config.plugins = [
  'AMap.ToolBar',
  'AMap.MoveAnimation',
  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];
Vue.use(AmapVue);

3.在vue文件内使用   外层需要一个盒子设置宽高  amap是根节点

<!-- :zoom是在地图初始化的缩放等级  center是初始化地图的位置   picth是初始化地图的Y轴摄像机位置-->
     <amap ref="myMap" :zoom=15 :center=[x,y] :pitch="60">

        <!-- :position 是在地图上画的原生点  -->
        <amap-marker ref="myMarker" :position="[x, y]" :zooms="[3, 20]" />
      </amap>

4.画圆圈

 <!-- center是在地图上画的圆形  radius是大小 -->
        <amap-circle-marker :center="[xx, yy]" :radius="20" />

5.划线

<!--  amap-polyline 是划线的  path是个数组 里面有若干个数组 来标记画的线 strokeColor是线的颜色 strokeWeight是线的宽度  isOutline是是否开启边线 outlineColor是边线的颜色 click是线的点击事件-> -->
        <amap-polyline :path="lineArr" strokeColor="#000" :strokeWeight="10" isOutline outlineColor="red" @click="lineBtn"/>

6.画不规则面积

 <!-- amap-polygon 是面积 path是个数组 里面有若干个数组 组合链接起来标记地图上的面积位置 -->
        <!--  每个星号就是一个角  组合画出一个面积
            *-------*
            |       |   数组类型：[[x1,y1],[x2,y2],[x3,y3],[x4,y4]]
            |       |
            *-------*
         -->
        <amap-polygon :path="polygonArr" />

7.在地图指定位置标注文字

 <!-- text是可以在地图上标点的地方的文本标记 -->
        <amap-text :position="[xxx, yyy]" :text="text" />

8.画圆形的面积 

        <!-- amap-ellipse 是画圆形面积  center是圆的中心 radiys 是圆形的边-->
        <amap-ellipse :center="[x, y]" :radius="[rx, ry]" />

 

 9.控件 

<!-- amap-tool-bar 地图放大缩小的控件 -->
<amap-tool-bar />
 <!--amap-control-bar 指南针控件 -->
        <amap-control-bar />
 <!-- amap-hawk-eye右下角小地图控件 -->
        <amap-hawk-eye />
   <!--amap-scale 左下角 离地面距离控件 -->
        <amap-scale />
   <!-- 右上角卫星图 普通图切换 -->
        <amap-map-type />