sifa-mp/lawOrgPages/pages/map.vue

<template>
  <view class="min-height bg-main-light">
    <HeaderItem title="法律服务地图"/>
    <view class="p-20 pos-r bg-linear">
      <u-input v-model="keyword" shape="circle" :custom-style="{background: 'white', height: '65rpx'}"
               placeholder="请输入您要查找的机构姓名"/>
      <view class="pos-a" style="right: 30rpx; top: 25rpx">
        <u-button shape="circle" type="primary" :custom-style="{width: '200rpx', zIndex: 9999}" @click="getList">
          搜索
        </u-button>
      </view>
    </view>
    <view class="card m-20 flex justify-center items-center" @click="showType = true">
      <u-icon name="arrow-down" :label="type" label-pos="left" label-size="25rpx"/>
    </view>
    <map style="width: 100%; height: calc(100vh - 410rpx);"
         @markertap="onClickedMarker"
         :scale="scale"
         :longitude="longitude"
         :latitude="latitude"
         :markers="markers">
    </map>
    <view class="bottom pos-r" v-if="showBottom">
      <view style="position:absolute; right: 20rpx; top: 20rpx" @click="showBottom = false">
        <u-icon name="close"/>
      </view>
      <view class="p-50 flex justify-between items-center text-25">
        <view class="flex flex-col justify-start items-start" v-if="showBottom && clickedItem">
          <text class="text-28 font-bold">{{ clickedItem.title }}</text>
          <text class="mt-15 text-25">{{ clickedItem.province }}{{ clickedItem.city }}{{ clickedItem.region }}</text>
        </view>
        <view>
          <u-icon name="/lawOrgPages/static/map-circle.png" size="100rpx" @click="toNav" label="到这去" label-size="25rpx"
                  space="10rpx" label-pos="bottom"/>
        </view>
      </view>
    </view>
    <u-picker :show="showType" :columns="[typeList]" @cancel="showType = false"
              :default-index="defaultIndex"
              @confirm="selectType" key-name="dictDataCode"
    />
  </view>
</template>

<script>
import HeaderItem from "@/components/HeaderItem.vue";
import {dictDataReq} from "@/api/common";
import {listLawOrgReq} from "@/api/lawOrg";
import {MAIN} from "@/config/color";
import coordtransform from 'coordtransform'

export default {
  name: "peopleList",
  components: {HeaderItem},
  data() {
    return {
      type: '全部机构类型',
      keyword: '',
      list: [],
      typeList: [],
      defaultIndex: [0],
      showType: false,
      longitude: null,
      latitude: null,
      clickedItem: null,
      showBottom: null,
      scale: 13,
      markers: []
    }
  },
  methods: {
    MAIN() {
      return MAIN
    },
    async getTypeList() {
      const {data} = await dictDataReq({dictId: '161'})
      this.typeList = [{dictDataCode: '全部机构类型'}, ...data]
    },
    selectType({value}) {
      this.type = value[0].dictDataCode
      this.showType = false
      this.getList()
    },
    async getList() {
      const {data} = await listLawOrgReq({
        keywords: this.keyword
      })
      this.markers = []
      this.list = this.type !== '全部机构类型' ? data.filter(item => item.type === this.type) : data
      if (this.list.length) {
        this.markers = this.list.map(item => {
          const [lng, lat] = coordtransform.wgs84togcj02(item.lng, item.lat)
          return {
            id: item.id,
            width: 20,
            height: 30,
            latitude: parseFloat(lat),
            longitude: parseFloat(lng)
          }
        })
        this.latitude = parseFloat(this.list[0].lat)
        this.longitude = parseFloat(this.list[0].lng)
      }else this.$toast('暂无数据')
    },
    call(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber
      })
    },
    onClickedMarker({markerId}) {
      this.clickedItem = this.list.find(item => item.id === markerId)
      this.showBottom = true
    },
    toNav(){
      const [lng, lat] = coordtransform.wgs84togcj02(this.clickedItem.lng, this.clickedItem.lat)
      uni.openLocation({
        latitude: parseFloat(lat),
        longitude: parseFloat(lng),
        name: this.clickedItem.title,
        address: `${this.clickedItem.province}${this.clickedItem.city}${this.clickedItem.region}${this.clickedItem.address}`,
      })
    }
  },
  onLoad() {
    this.getTypeList()
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  border-radius: 30rpx 30rpx 0 0;
  background-color: white;
  width: 100%;
  height: 300rpx;
}
</style>