前端-高德地图选点带搜索功能

先看效果

地图组件

<template>
    <el-dialog
    title="选择位置"
    width="800px"
    :visible.sync="showDialog"
  >
      <div class="mapContainer">
        <div class="mapSearchBox" v-loading="loading">
          <div class="mapSearch" v-show="!loading">
            <el-input placeholder="请输入你要查找的关键词" class="tishikuang" v-model="userInput" id="tishikuang">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div id="container">
          </div>
          <div style="text-align: right;margin-bottom: 10px;margin-top: 20px;">
            <el-button @click="destroyMap">取消</el-button>
            <el-button type="primary" @click="biu">确定</el-button>
          </div>
        </div>
      </div>
 </el-dialog>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig = {
      securityJsCode: '你的秘钥'//安全密钥
  }
  export default {
    props: ['zIndex', 'showDialog'],
      data() {
          return {
            visible:true,
            loading: false,
              map: null,
              autoOptions: {
                  input: 'tishikuang' //绑定的搜索关键字的input标签ID
              },
              auto: null,
              userInput: '', //绑定的搜索关键字的的内容
              placeSearch: null,
              searchHere: null, //根据搜索组件搜索到以后的地点信息
              marker: null, //地图标点
              lnglat: null, //点击地图以后的经纬度
            geocoder: null,
            address: ''
          }
      },
      mounted() {
          setTimeout(() => {
              this.initMap()
          }, 500)
      },
      methods: {
          // poi搜索以后 点击确认选址以后的操作
          biu() {
          if (this.lnglat) {
            console.log('选择地点:' + this.lnglat);
            this.$emit('select', this.lnglat,this.address);
          } else {
            this.$message({
              message: '请选择位置',
              type: 'warning'
            });
          }
          },
          initMap() {
             this.loading = true;
              // 加载地图
              AMapLoader.load({
                  key: "你申请的key",
                  version: "2.0",
                  plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
                      'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'
                  ],
              }).then((AMap) => {
                  this.map = new AMap.Map("container", { //设置地图容器id
                      viewMode: "3D", //是否为3D地图模式
                      zoom: 17, //初始化地图级别
                      // center: [105.602725, 37.076636], //初始化地图中心点位置
                  });
                  this.auto = new AMap.AutoComplete(this.autoOptions)
                  //
                  this.placeSearch = new AMap.PlaceSearch({
                      map: this.map
                  }) //构造地点查询类
                  this.auto.on('select', this.select)//绑定查询事件

                  this.marker = new AMap.Marker({
                    zIndex:999
                  });
                this.geocoder = new AMap.Geocoder({
                  // city: "010", //城市设为北京，默认：“全国”
                  // radius: 1000 //范围，默认：500
                })
                    // 添加点击事件
                    this.map.on('click', (e) => {
                      console.log('点击位置:', e.lnglat);
                      this.map.add(this.marker);
                      this.marker.setPosition(e.lnglat);
                      this.lnglat = e.lnglat;

                      this.geocoder.getAddress(this.lnglat, (status, result) => {
                        if (status === 'complete' && result.regeocode) {
                          this.address = result.regeocode.formattedAddress
                          console.log(',,,,'+this.address)
                        }
                      })
                    });

              }).catch(e => {
                  console.log(e);
              }).finally(() => {
                  this.loading = false;
              });
          },

          //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
          select(e) {
              console.log('poi搜索',e)
              this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
              this.placeSearch.search(e.poi.name) //关键字查询查询
              this.searchHere = e.poi
              this.map.setZoom(10,true)
          },
          destroyMap() {
            if (this.map) {
                  this.map.destroy();
                  this.map = null;
              }
            this.$emit('closed')
          }

      },

  }
</script>
<style type="text/css">
       .amap-logo{
       display: none;
       opacity:0 !important;
       }
       .amap-copyright {
           opacity:0;
       }
   </style>
<style lang="scss" scoped>
  #container {
      padding: 0px;
      margin: 0px;
      width: 100%;
      height: 500px;
  }

  .mapSearch {
      margin-bottom: 8px;
      width: 300px;
      margin-top: 20px;
      margin-right: 30px;
      .el-button {
          margin-left: 8px;
      }
  }

  #tishikuang {
      margin-bottom: 200px;
      display: block;
  }
  .mapContainer{
    // position: fixed;
    width: 100%;
      height: 100%;
      // top:0;

    .modal{
      // width: 100%;
      // height: 100%;
      // position: absolute;
      // top: 0;
      // left: 0;
      // background-color: #333;
    opacity: 0.6;
    }
    .mapSearchBox{
        width: 100%;

        h3{
          text-align: left;
          font-size: 18px;
          font-weight: 500;
        }
        .tishikuang{
          width: 40%;
          position: absolute;
          right: 30px;
          top: 96px;
          z-index: 21;
        }
    }
  }

</style>

引用组件

<map-dialog
        v-if="showDialog"
        :showDialog="showDialog"
        z-index="9999"
        @select="handleLocationSelect"
        @closed="()=>{showDialog = false}"
    ></map-dialog>
handleLocationSelect(lnglat,address) {
      this.showDialog = false // 关闭弹窗
      console.log('hhhh'+address)
       console.log('hhhh'+lnglat.lng)
        console.log('hhhh'+lnglat.lat)
    },