vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)

vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)

先npm安装高德地图
npm i @amap/amap-jsapi-loader --save

<template>
  <div class="StationMap">
    <van-nav-bar title="场站地图" fixed placeholder safe-area-inset-top left-text="返回" left-arrow @click-left="$router.goBack()"/>
    <div class="content-header">
      <div class="van-search-box">
        <van-search v-model="searchValue" placeholder="请输入场站名称" @search="onSearch"></van-search>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="dropdownValue" :options="dropdownOption"  @change="dropdownChange"/>
      </van-dropdown-menu>
    </div>
    <ul class="searchData" v-show="searchDataShow">
      <li class="van-cell" v-for="(item, i) in searchData" :key="i" @click="searchDataClick(item)">{{item.content}}</li>
    </ul>

    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "StationMap",
  computed: {
    searchData () {
      let searchVal = '';//搜索后的数据
      if (this.searchValue) {
        searchVal = this.mapData.filter(item => {
          return [Object.keys(item)[2]].some(key => {
            // 搜索所有的内容
            return String(item[key]).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1;
          })
        })
        this.searchDataShow = true;
        return searchVal;
      }
    }
  },
  watch: {
    searchDataShow () {
      if ((this.searchDataShow) && (this.searchValue === this.searchDataClickItem)) this.searchDataShow = false
    }
  },
  data() {
    return {
      map: null,
      searchDataShow: false,
      searchDataClickItem: "", // 点击之后的值
      mapData: [
        {
          lng: "106.15",
          lat: "30.02",
          content: "a合川"
        },
        {
          lng: "106.16",
          lat: "29.18",
          content: "b江津"
        },
        {
          lng: "107.05",
          lat: "29.10",
          content: "c南川"
        },
      ],
      searchValue: "", // 搜索的值

      dropdownValue: 1,
      dropdownOption: [
        {text: '项目1', value: 1},
        {text: '项目2', value: 2},
      ],
    }
  },
  methods: {
    dropdownChange (val) {
      this.searchValue = "";
    },
    // 搜索按钮, 键盘Enter触发
    onSearch(val) {
      this.mapData.forEach(item => {
        if (item.content === val) {
          this.searchDataClick(item)
        }
      })
    },
    // 点击模糊搜索列表 或 弹出信息窗并设置中心位置
    searchDataClick (item) {
      this.searchValue = item.content;
      this.searchDataShow = false;
      this.searchDataClickItem = item.content;

      // 1.信息窗的偏移位
      let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      // 2.获取搜索结果的位置
      let position = [item.lng, item.lat]
      // 3.设置信息窗的内容
      infoWindow.setContent(item.content);
      // 4.将 搜索结果的位置 设置为 中心点
      this.map.setCenter(position)
      // 5.打开信息窗
      infoWindow.open(this.map, position);
    },
    // 高德地图
    initMap() {
      AMapLoader.load({
        key: "4a9b8d4819c66a63a4b5544397510c59", // 申请好的开发者Key
      }).then(AMap => {
        this.map = new AMap.Map("container", {
          resizeEnable: true,
        });
        let lnglats = [];
        for (const i in this.mapData) {
          lnglats.push([this.mapData[i].lng, this.mapData[i].lat])
        }
        for (let i = 0; i < this.mapData.length; i++) {
          let marker = new AMap.Marker({
            position: lnglats[i],
            map: this.map
          });
          marker.content = this.mapData[i].content;
          marker.on('click', this.markerClick);
          marker.emit('click', {target: marker});
        }
        this.map.setFitView();
      }).catch(err => {
        console.log(err);
      })
    },
    markerClick (e) {
      let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      infoWindow.setContent(e.target.content);
      infoWindow.open(this.map, e.target.getPosition());
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style lang="scss">
.StationMap {
  .content-header {
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    .van-search-box{
      flex: 1;
      .van-search {
        padding: 0;
        .van-cell {
          line-height: 40px;
          padding: 0;
        }
        .van-icon-clear{
          padding-right: 20px;
        }
      }
    }
    .van-dropdown-menu {
      flex: 1;
      //margin-left: 10px;
      border-left: 1px solid #e8e8ef;
      .van-dropdown-menu__bar {
        height: 40px;
        background-color: #f7f8fa;
        box-shadow: none;
      }
    }
  }
  .searchData {
    position: fixed;
    top: 86px;
    right: 0;
    left: 0;
    z-index: 998;
    overflow: hidden;
    background-color: #fff;
  }
  #container {
    width: 100%;
    height: 100vh;
  }
}
</style>

结果