vue-amap使用记录

vue-amap 插件官网提供的信息太少了，记录一下自己的成果，分享给同样踩坑的朋友

实现了默认定位到当前位置   拖拽地图定位位置 搜索地址定位位置 地图上点击获取定位位置

实现效果如图：

<template>
  <div class="amap-page-container">
    <el-amap-search-box style="width:100%;position: fixed;" class="search-box" :search-option="searchOption"
                        :on-search-result="onSearchResult"></el-amap-search-box>

    <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" :plugin="plugins" class="amap-demo"
             :amap-manager="amapManager" :events="events">
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :events="marker.events"
        :position="marker.position"
        :content="marker.content"
        :offset="markerOffset"
        showMarker="true"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<style>
//自定义搜索框样式
  li {
    list-style: none;
  }

  .search-tips {
    width: 100%;
  }

  .search-box {
    position: absolute;
    width: 100%;
  }

  .amap-page-container {
    width: 100%;
    height: 100%;
  }

  .address-div {
    position: fixed;
    bottom: 0px;
    height: 100px;
    background-color: white;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    width:calc(100% - 40px);

  }

//不知道为什么定位按钮的buttonOffset属性设置了无效，后来直接强制修改的样式
  .amap-geolocation-con {
    bottom: 130px !important;
    right: 20px !important;
  }

</style>

 

<script>
  import VueAMap from 'vue-amap'

  let UA = require('ua-device');

  let amapManager = new VueAMap.AMapManager()
  let geocoder = null

  export default {
    data() {
      let self = this
      return {
       
        currentLocationInfo: {},
        map: null,
        markers: [],   
        markerOffset: [-130, -110],
        amapManager,
        geocoder,
        searchOption: {
          city: '全国',
          citylimit: false
        },
        mapCenter: [0, 0],
        loaded: false,
        events: {
          init(o) {
            self.map = amapManager.getMap();
          },
          // 点击获取地址的数据
          click(e) {
            let {lng, lat} = e.lnglat

            self.center = [lng, lat]

            // 这里通过高德 SDK 完成。
            self.geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                console.log(result);
                if (result && result.regeocode) {
                  self.addMarker(lng, lat, result.regeocode.formattedAddress);
                  self.$nextTick()
                }
              }
            })
          },
          dragging(e) {
            
          },
          dragend() {
            let map = amapManager.getMap();

            self.geocoder.getAddress(map.getCenter(), function (status, data) {
              if (status === 'complete' && data.info === 'OK') {  //获得了有效的地址信息:
                let map = amapManager.getMap();
                self.addMarker(map.getCenter().getLng(), map.getCenter().getLat(), data.regeocode.formattedAddress)

              } else {//获取地址失败
                var str = '定位失败';
                str += '错误信息：'
                switch (data.info) {
                  case 'INVALID_UESR_KEY':
                    str += '用户key非法或过期';
                    break;
                  case 'SERVICE_UNAVAILABLE':
                    str += '请求服务不可用';
                    break;
                  case 'INSUFFICIENT_PRIVILEGES':
                    str += '无权限访问此服务';
                    break;
                  case 'INVALID_PARAMS':
                    str += '请求参数非法';
                    break;
                  default:
                    str += '无网络或其他未知错误';
                    break;
                }
                str += '，请重新获取当前位置。';
                console.log(str);
              }
            });
          }
        },
        plugins: [
          {
            pName: 'Geolocation',
            zoomToAccuracy: true,
            buttonPosition: 'RB',
            events: {
              init(o) {
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.setMapCenter(result.position.lng, result.position.lat);
                    self.loaded = true
                    self.addMarker(result.position.lng, result.position.lat, result.formattedAddress);
                    self.$nextTick()
                  }
                })
              },

              complete: function (result) {
                if (result && result.position) {
                  self.setMapCenter(result.position.lng, result.position.lat);
                  self.addMarker(result.position.lng, result.position.lat, result.formattedAddress);
                  self.$nextTick()
                }
              },
              error: function () {

              }
            }
          },
          {
            // 工具栏
            pName: 'Autocomplete',
            events: {
              init(instance) {
                // console.log(instance);
              }
            }
          },
          {
            // 搜索
            pName: 'PlaceSearch',
            events: {
              init(instance) {
                // console.log(instance)
              }
            }
          },
          {
            // 定位
            pName: 'Geocoder',
            events: {
              init(instance) {
                self.geocoder = instance
                console.log("ddd");
              }
            }
          },
        ],
      }
    },

    methods: {
      setMapCenter(lng, lat) {
        this.mapCenter = [lng, lat]
      },
      addMarker(lng, lat, formattedAddress) {
        this.markers = []
        this.markers.push({
          position: [lng, lat],
          events: {},
          content: `<div style="display: flex;flex-direction: column;width: 260px;height: 120px;color: white;">
                        <div style="background-color:#53A849;padding: 5px;height: 80px;box-shadow:2px 2px 5px rgba(68,53,53,0.34);border-radius: 5px;">${formattedAddress}</div>
                        <div style="height: 30px;align-self: center;">
                            <div style="height: 100%;background-color:#0F7303;width:4px;box-shadow:2px 2px 5px rgba(68,53,53,0.34); "></div>
                        </div>
                        <div style="width: 10px;height: 6px;background: #0F7303;border-radius: 50%;align-self: center;margin-top: -3px;"></div>
                        <div style="width: 31px;height: 20px;background: #53A849;opacity: 0.4;border-radius: 50%;align-self: center;margin-top: -13px;"></div>
                    </div>`
        })

        this.currentLocationInfo.address = formattedAddress
        this.currentLocationInfo.longitude = lng
        this.currentLocationInfo.latitude = lat
      },
      onSearchResult(pois) {
        let latSum = 0
        let lngSum = 0
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi
            lngSum += lng
            latSum += lat
          })
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          }
          this.mapCenter = [center.lng, center.lat]
        }
      },
    }
  }
</script>