使用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 />