如何在VUE上使用高德地图

html上

<el-amap vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" class="amap-demo" style="height: 200px; width: 100%;margin-top: 50px; z-index: -1;"></el-amap>

在data上

data() {
      let self = this;
      return {
        alertShow: false, // 是否显示弹窗
        alertText: '', // 弹窗内容
        // timeHours: '', // 当前小时
        // timeM: '', // 当前分
        // timeS: '', // 当前秒
        userID: '', // 用户的会话信息
        isShow: false, // 显示打卡已成功
        addr:"", // 储存地址信息
        zoom:16, // 位置大小
        center: [121.59996, 31.197646], // 中心点
        plugin: [
          {
            pName: "Geolocation",
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  // console.log(result.position.lng,result.position.lat);  //  能获取定位的所有信息
                  if (result && result.position) {
                  // 经纬度
                    self.lng = result.position.lng; 
                    self.lat = result.position.lat;
                    // 地址信息
                    self.str = result.formattedAddress;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.$nextTick();
                    sessionStorage.setItem(
                      "id",
                      JSON.stringify(
                        // result.position.lng + "," + result.position.lat
                        result.formattedAddress   // 把地址信息储存的本地缓存上
                      )
                    );
                  }
                });
              }
            }
          }
        ]
      }
    },
   

效果图：

具体可点我查看