利用高德地图API开发地图选址组件

效果如下

html：

<div>
    <el-button type="primary" size="medium" plain @click="handleSelectLocation(true)" v-if="!readonly  && !showResult">查询</el-button>
    <el-button type="primary" size="medium" plain @click="confirmLocation()" v-if="!readonly  && showResult">确认</el-button>
    <el-button type="infor" size="medium" plain @click="handleSelectLocation(false)" v-if="!readonly && showResult">取消</el-button>
    <el-row :span="24">
      <el-alert v-if="searchList.length>0" :title="`当前已为您找到${searchList.length}条结果，点击地图上的标记确定位置。`" type="success" show-icon style="padding: 0px 10px;margin: 5px 0;"></el-alert>
      <el-alert v-else title="请将鼠标移至地图上，点击地图确定位置。也可根据关键字查询" type="warning" show-icon style="padding: 0px 10px;margin: 5px 0;"></el-alert>
    </el-row>
    <div class="map-box">
      <div id="container"></div>
      <!-- 搜索结果面板 -->
      <div class="map-result" v-show="showResult">
        <ul v-if="searchList.length > 0">
          <li v-for="(item,index) in searchList" :key="index">
            <a href="javascript://" @click="selecePointSetCenter(item)">{{index+1}}、{{item.name}}</a>
          </li>
          <div id="pageDiv" class="map-page">
            <input class="map-page-first" type="button" value="第一页" @click="firstPage()"/>
            <input class="map-page-prev" type="button" value="上一页" @click="previousPage()"/>
            <input class="map-page-next" type="button" value="下一页" @click="nextPage()"/>
            <input class="map-page-last" type="button" value="最后一页" @click="lastPage()"/>
            <div class="map-page-total">
              <span>共{{pagination.totalPage}}页,当前第{{pagination.pageNum}}页；</span>
              转到第<input class="map-page-search" v-model="pageNo" type="text" value="1" id="pageId" size="3"/>页
              <input type="button" @click="gotoPage(pageNo)" value="转到"/>
            </div>
          </div>
        </ul>
        <p v-else>在<strong style='color:#c31818;'> {{ district }}</strong>没有搜索到与<strong style='color:#c31818;'>
            {{ value }}</strong>相关的结果。</p>
      </div>
    </div>
  </div>

//初始化地图信息

      initAmap() {
        const that = this;
        that.maps = new AMap.Map("container", {
          resizeEnable: true
        }) // 创建Map实例

        if(!that.readonly){
          that.maps.on('click', that.regeoCode)
        }
        if(JSON.stringify(that.latLng) !== '{}'){
          that.selected.location.lat = that.latLng.latitude
          that.selected.location.lng = that.latLng.longitude
          that.buildMarker()
          that.selecePointSetCenter(that.selected)
        }else{
          that.maps.setCity(that.district);
        }
      },

创建标记

buildMarker(){
        const that = this;
        const lnglat = Object.values(that.selected.location)
        that.maps.clearMap()//清空地图
        // 创建一个 Marker 实例：
         that.marker = new AMap.Marker({
          title:'点',
          position: lnglat,
        });
        // 将创建的点标记添加到已有的地图实例：
        that.maps.add(that.marker);
        var geocoder = new AMap.Geocoder({
          city: that.district,
          radius: 1000 //范围，默认：500
        });
        geocoder.getAddress(lnglat, function(status, result) {
          if (status === 'complete' && result.regeocode) {
            var address = result.regeocode.formattedAddress;
            console.log(address)
            that.selected.address = address
            //构建自定义信息窗体
            var infoWindow = new AMap.InfoWindow({
              title: '位置',
              anchor: 'bottom-center',
              content: address,
              offset: new AMap.Pixel(0, -40)
            });
            infoWindow.open(that.maps, lnglat)
            that.$emit('update', that.selected)
          }
        });
      },

搜索查询

handleSelectLocation(boolean) {
        const that = this;
        const keywords = that.value
        if(!boolean){   //取消处理
          that.showResult = false
          that.searchList = []
          that.maps.on('click', that.regeoCode)
          that.buildMarker()
          return
        }
        if (!!keywords) {
          that.maps.clearMap()//清空地图
          that.maps.off('click', that.regeoCode)
          AMap.plugin('AMap.PlaceSearch', function() {
            // 实例化Autocomplete
            var autoOptions = {
              city: that.district,
              pageSize: that.pagination.pageSize, // 单页显示结果条数
              pageIndex: that.pagination.pageNum, // 页码
              map: that.maps, // 展现结果的地图实例
              autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            }
            var autoComplete = new AMap.PlaceSearch(autoOptions);
            autoComplete.search(keywords, function(status, result) {
              // 搜索成功时，result即是对应的匹配数据
              console.log('result', result)
              that.showResult = true
              if(JSON.stringify(result.poiList) !== '{}'){
                that.searchList = result.poiList.pois
                that.pagination.totalPage = Math.ceil(result.poiList.count / that.pagination.pageSize)
                AMap.event.addListener(autoComplete, 'markerClick', function (e) {
                  that.selected.address = e.data.pname + e.data.adname + e.data.address
                  that.selected.location.lng = e.data.location.lng
                  that.selected.location.lat = e.data.location.lat
                })
              }
            });
          })
        }
      },