高德地图+vue+vant

最近在写一个移动端项目,项目要求创建活动时能用户能使用高德地图并选择活动地点。因为本人是菜鸟，期间踩了很多坑,心中有一万个草泥马，现在分享出来,便于本人回顾，或者能够与大家分享交流

一、还是先展示最终效果,以及详细代码以及注释

<template>
   <div class="amap-page-container">
      <el-amap                         //使用高德地图
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"                     
        class="amap-demo"
        :events="events"
        style="height:500px;width:100%">
        <div class="top" >
        <div class="search-box" >
          <!-- <input type="text"  v-model="searchVal" 
          @input="getLocation"
          placeholder="请输入地址"> -->
          <van-field               *这里使用了vant ui   需要去官方安装。地址：https://vant-contrib.gitee.io/vant/#/zh-CN/    也可以注释掉  直接使用上面的输入框
          v-model="searchVal"           
          rows="1"
          autosize
          left-icon="search" 
          right-icon="cross"
          @click-right-icon="clear"
          @input="getLocation"
          type="textarea"
          placeholder="请输入地址"
          style=" border: 1px solid #38f;width:90%"
        />
            <div class="list" v-if="showList">    
              <ul class="area_list"
                  v-for="(item,index) in tips"
                  :key="item.id+index"
                  @click="postAddRess(item)"
                  >
                  <li>
                      <p>{{item.name+item.address}}</p>   //这里主要是将搜索完的地址在搜索框下面展示出来
                      <hr>
                  </li>
              </ul>
        	</div>
        </div>
        </div>
        <el-amap-marker :position="centerLogo" ></el-amap-marker>   //这里是在地图上展示标记点
      </el-amap>
      <div class="toolbar">
        活动地点: {{ searchVal }}   //在这里展示点击的地点详细信息
      </div>
    </div>
</template>
<script>
  import VueAMap from 'vue-amap'
  import Vue from 'vue'
    export default   {
      data(){
        VueAMap.initAMapApiLoader({
          key: '',   //这里需要写你在高德地图申请的key值
          plugin: ['AMap.Autocomplete', 'AMap.Geocoder','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
          // 默认高德 sdk 版本为 1.4.4
          v: '1.4.4'
        });
        let self = this;
        return {
          showList:false,    //用来控制搜索内容的展示与否
          name: "",
          tips:[],//搜索框搜索的地址
          searchVal:'',//搜索框值
          zoom: 12,
          center: [114.019754, 29.192216],   //这个是默认展示点
          address: '',
          centerLogo: [114.019754, 29.192216],    //这个是地图标记在地图上展示的点
          events: {
            click(e) {         //地图点击事件
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
              Vue.set(self.centerLogo,0,self.lng)       //改变地图标记的位置
              Vue.set(self.centerLogo,1,self.lat)
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.searchVal = result.regeocode.formattedAddress;   //获取到点击地图的结果
                    self.$nextTick();
                  }
                }
              });        
            }
          },
          lng: 0,
          lat: 0
        };
      },
      methods:{
            clear(){
              this.searchVal=''
              this.showList = false     
            },
            getLocation(){
                this.showList = true
                let val = this.searchVal;
                let _this = this;
                AMap.plugin('AMap.PlaceSearch',function(){
                    var place ={
                        city: val
                    }
                    var placesearch = new AMap.PlaceSearch(place);
                    placesearch.search(val, function(status, result) {
                      console.log(result);   
                      if(result.poiList==undefined){
                        return
                      }
                        _this.tips = result.poiList.pois   //成功获取到搜索结果
                    })
                })
                if(this.searchVal == ''){
                    this.showList = false
                }
            },
            postAddRess(data){
                this.lng = data.location.lng
                this.lat = data.location.lat
                this.center = [data.location.lng,data.location.lat]           //改变地图标记的位置
                this.centerLogo = [data.location.lng,data.location.lat]     //改变地图标记的位置
                let str = data.name+data.address;
                this.searchVal = str;
                this.showList = false
            },
      }
    };
</script>

<style>
    .list{
        width: 85%;
        right: 7%;
        margin: 0 auto;
        border: solid   rgb(235, 217, 217);
        position:relative;
        overflow: hidden;
        overflow-y: scroll;
        height: 300px;
        background-color: white;
    }
    .search-box {
        position: absolute;
        z-index: 5;
        width: 90%;
        left: 10%;
        top: 10px;
        height: 30px;
    }
    .search-box input {
      width: 80%;
      height: 100%;
      border: 1px solid #38f;
      padding: 0 8px;
    }
</style>

搜索框输入搜索内容后实现的效果

如果文中有不足之处还望大家海涵,并指点一二,共同学习与交流