vue3保存筛选条件

Posted 2023-05-09

参考技术A vue3保存筛选条件需要保持列表页的筛选条件、分页情况、做到刷新页面，从详情页返回列表页保留之前的筛选情况。将筛选条件保存在url上，这样可以复制直接使用。

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

vue实现高德地图模糊搜索+筛选条件+定位+信息窗

• 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>

结果