高德地圖的地圖組件 - vue-amap

想要獲取當前的位置，便可使用vue-amap是基於Vue 2.0和高德地圖的地圖組件。

使用步驟：

1.安裝

npm install -S vue-amap // 可在package.json查看是否安裝
複製代碼

2.在入口文件main.js引入

// 引入高德地圖
    // 高德地圖組件使用
    import VueAMap from 'vue-amap'
    
    Vue.config.productionTip = false
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      key: 'your amap key', 
      plugin: [
      'AMap.Autocomplete', 
      'AMap.PlaceSearch', // POI搜索插件
      'AMap.Scale', // 右下角縮略圖插件 比例尺
      'AMap.OverView', 
      'AMap.ToolBar', // 地圖工具條
      'AMap.MapType', 
      'AMap.PolyEditor', 
      'AMap.CircleEditor',// 圓形編輯器插件
      'AMap.Geolocation'// 定位控件，用來獲取和展現用戶主機所在的經緯度位置
      ],
      // 默認高德 sdk 版本爲 1.4.4
      v: '1.4.4'
    });
複製代碼

3.在組件中.vue文件

<div class="getlocation">定位</div>
     <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap>
     <div class="toolbar">
       <span v-if="loaded">location: lng = {{ lng }} lat = {{ lat }}</span>
       <span v-else>正在定位</span>
     </div>
     
     script裏面
       export default {
       data() {
         let self = this;
         return {
            center: [121.59996, 31.197646],
            lng: 0, 
            lat: 0,
            loaded: false,
           plugin: [
              {
                pName: "Geolocation", //定位
                events: {
                  init(o) {
                    // o 是高德地圖定位插件實例
                    o.getCurrentPosition((status, result) => {
                      if (result && result.position) {
                        console.log(status, result);
                        self.lng = result.position.lng; //設置經度
                        self.lat = result.position.lat; //設置維度
                        self.center = [self.lng, self.lat]; //設置中心座標
                        self.loaded = true;
                        self.$nextTick();
                      }
                    });
                  }
                }
              }
            ]
         };
       },
       
       
       style裏
        .getlocation{
            margin-left:4rem;
            font-size:15px;
            font-weight: 500;
            margin-top:0.3rem;
        }
        .amap-demo {
          height: 15rem;
          margin-top: 0.3rem;
        }
複製代碼

這是我在開發中作的獲取當前位置的功能，經過vue-amap插件便可獲取當前位置的經緯度，基於高德地圖定位的定位功能。