地图定位

//进入此网站 elemefe.github.io/vue-amap/#/…

// 安装 npm install vue-amap --save

//搜索高德地图开发者

    //const MapKey="" //申请Key 
    
    <template>
        <div class="amap-page-container">
          <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
          </el-amap>
    
          <div class="toolbar">
            <p v-if="loaded">
              <!-- location: lng = {{ lng }} lat = {{ lat }}< br /> -->
              {{address}}
            </p>
            <p style="color:red;" v-else>正在定位...</p>
          </div>
        </div>
      </template>
    
      <style>
        .amap-demo {
          height: 300px;
        }
        .toolbar{
          width: 100%;
          text-align: center;
        }
        .toolbar p{
          width: 100%;
          text-align: center;
    
        }
      </style>
    
      <script>
      import {getAddress} from "@/API"
        export default {
          data() {
          	
            let self = this;
            return {
              center: [121.59996, 31.197646],
              lng: 0,
              lat: 0,
              address:"",
              loaded: false,
              plugin: [{
                pName: 'Geolocation',
                events: {
                  init(o) {
                    // o 是高德地图定位插件实例
                    o.getCurrentPosition((status, result) => {
                      if (result && result.position) {
    
                        self.lng = result.position.lng;
                        self.lat = result.position.lat;
                        localStorage.setItem("lng",self.lng)
                        localStorage.setItem("lat",self.lat)
                        self.loaded = true;
                        self.$nextTick();
                        getAddress(self.lng ,self.lat).then(res=>{
    
                          self.address=res.regeocode.formatted_address
                        })
    
                      }
                    });
                  }
                }
              }]
            };
          }
        };
    </script>