js 高德地图简单使用

记录一下

效果这样

1618898821118.jpg

<template>
  <Navigation title="选择门店" ref="navigation">
    <template v-slot:content>
      <div class="navi-content get-location-contanier">
        <div class="location-header">
          <div id="container" class="amap-wrapper"></div>
        </div>
        <div class="location-shop-list vanListBody">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            style="width:100%;"
          >
            <van-cell class="list-cell" v-for="(item, index) in locationList" :key="index">
              <div v-if="index == 0" class="first-cell">
                <p class="first-address">地址：<span class="font-blod">{{item.address}}</span></p>
                <van-button class="cell-add-btn button-radius van-add-btn van-button-sure" @click.stop="handleCellClick(item)" type="info">确认</van-button>
              </div>
              <div v-else @click="handleCellClick(item)">
                <p>{{item.name}}</p>
                <p class="location-address">{{item.address}}</p>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </template>
  </Navigation>
</template>
<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      loading: false,
      finished: false,
      map: null,
      marker: null,
      // geolocation: null,
      lng: 0,   // 经度
      lat: 0,   // 纬度
      locationList: [],
      addressInfo: {},
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      // 地图
      let self = this
      self.map = new AMap.Map('container', {
        zoom:16,//级别
        viewMode:'3D',//使用3D视图
        dragEnable: false,
        zoomEnable: false,
        doubleClickZoom: false,
        touchZoom: false
      });
      // 获取定位
      self.map.plugin('AMap.Geolocation', () => {
        let geolocation = new AMap.Geolocation({
          zoomToAccuracy: true,
          buttonPosition: 'RB'
        })
        self.map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
        function onComplete(data) {
          self.addressInfo = data["addressComponent"]
          let lat = data.position.getLat()
          let lng = data.position.getLng()
          console.log(lng, lat);
          self.addMarker(lng, lat)
        }
        function onError(data) {
          console.log(data)
          Toast('定位失败请刷新再试');
        }
      })
    },
    // 设置标记点
    addMarker(lng, lat) {
      // 标记点
      this.marker = new AMap.Marker({
        position:[lng, lat]//位置
      })
      this.map.add(this.marker);//添加到地图

      this.aMapSearchNearBy([lng, lat])
    },
    // 根据经纬度获取周边信息
    aMapSearchNearBy(centerPoint, city) {
      let that = this
      AMap.service(["AMap.PlaceSearch"], () => {
        let placeSearch = new AMap.PlaceSearch({
          pageSize: 20,
          pageIndex: 1,
          // city: '上海'
        })
        placeSearch.searchNearBy('', centerPoint, 1000, function(status, result) {
          if(result.info === 'OK') {
              // 周边地标建筑列表
              that.locationList = result.poiList.pois;
              that.finished = true
              console.log(that.locationList)
          } else {
              console.log('获取位置信息失败!');
          }
        });

      })
    },
    handleCellClick(val) {
      console.log(val)
      if (val) {
        this.$refs.navigation.onClickLeft(Object.assign(val, this.addressInfo))
        // 销毁地图
        this.map.destroy( )
      }

    }
  }
}
</script>
<style lang='less' scoped>
.get-location-contanier {
  .amap-wrapper {
    width: 100%;
    height: 300px;
  }
  .location-shop-list {
    top: 300px + 46px;
    overflow: auto;
    .list-cell {
      p {
        margin: 0;
      }
      .first-cell {
        display: flex;
        align-items: center;
        .first-address {
          flex: 1;
          padding-right: 8px;
          height: 36px;
          line-height: 18px;
        }
        .van-button-sure {
          width: 80px;
        }
      }
      .location-address {
        font-size: 12px;
        color: @gray-1;
      }
      .van-button__text {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>