vue-amap定位

註冊以及獲取key

1. 在官網進行註冊 https://lbs.amap.com/
2. 在控制檯的應用管理/我的應用中新增應用，新增key

配置 ：main.js中引入並配置，plugin根據自己需要新增

//vue-amap
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: '你的key值',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation'],
  uiVersion: '1.0.11' // 版本號
})
 

封裝元件 ：我把它設定成一個基礎元件，業務元件引用即可使用

<template>
  <div class="amap-page-container">
    <!- 
    	zoom：放縮程度 , 
    	plugin：data中有定義，是一些外掛，如工具欄等等，
    	center：定位經緯度位置
    	el-amap：高德地圖元件
    -->
    <el-amap 
        vid="amap"  
        :zoom="zoom"  
        :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>
</div>
</template>

<script>
export default {
  data() {
    let self = this;
    return {
      center: [121.59996, 31.197646],
      zoom: 17,
      lng: 0,
      lat: 0,
      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;             //設定維度
                  self.center = [self.lng, self.lat];         //設定座標
                  self.loaded = true;                         //load
                  self.$nextTick();                           //頁面渲染好後
                }
              })
            }
          }
        },
        {
          pName: 'ToolBar',  //工具欄
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          pName: 'OverView',  //鷹眼
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          pName: 'MapType',  //地圖型別
          defaultType: 0,
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        }
      ]
    }
  },
  methods: {
    //把經緯度傳到父元件
    sendlnglat (){ 
      this.$emit('register', this.lng, this.lat)
    }
  }
}
</script>

<style>
.amap-page-container {
  position: relative;
  width: 100%;
  margin-top: 0.03rem;
  height: 500px;
  font-size: 0.12rem;
  color: #fff;
}
</style>
 

參考官方vue-amap文件，地址：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
各位小夥伴可根據自己需要自擴充套件功能