storevisit-ui-mobile/src/views/storeManagement/newTMap.vue

<template>
  <div class="newTMap">
    <div id="allmap1" style="height: 100%; width: 100%"></div>
    <div
      style="position: fixed; z-index: 99999; top: 0; width: 100%; background-color: white"
      v-if="showmap">
      <form action="/">
        <van-search
          v-model="searchValue"
          left-icon="search"
          @input="searchFn"
          placeholder="请输入搜索关键词">
        </van-search>
      </form>
      <div style="height: 200px; overflow: hidden" v-if="searchSHow">
        <div style="height: 100px; min-height: 200px; overflow-y: scroll; padding: 12px">
          <div
            v-for="(itme, index) in mapsearchlist"
            :key="index"
            style="border-bottom: 1px solid #eee"
            @click="addressFn(itme)">
            <p>{{ itme.title }}</p>
            <p>{{ itme.address }}</p>
            <p>距离：{{ itme._distance }}米</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mapaddress" v-if="showmap">
      <div class="title">
        <span @click="showmap = false" style="float: left"
          ><van-icon name="cross" size="16"
        /></span>
        <p class="titleText">附近地址信息</p>
        <span style="float: right" @click="confirmMap">确定</span>
      </div>
      <div class="listBox">
        <van-radio-group v-model="addresssb" @change="mapselect" v-if="shows">
          <van-radio :name="index" v-for="(item, index) in maplist" :key="index"
            ><p style="margin: 4px 0; font-weight: bold">
              {{ item.title }}
            </p>
            <p style="margin: 4px 0">{{ item.address }}</p>
            <p style="margin: 4px 0">距离：{{ item._distance }}米</p>
          </van-radio>
        </van-radio-group>
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import { getMapPoi, getkeywordPoi } from '@/utils/TXApiFun';

export default {
  data() {
    return {
      searchValue: '',
      searchSHow: false,
      mapsearchlist: [],
      showmap: false,
      addresssb: '',
      shows: true,
      maplist: [],
    };
  },
  methods: {
    initMap(mapPointlist) {
      //创建map对象，初始化地图
      let latlng = {
        lat: this.pLat,
        lon: this.pLot,
      };
      /* eslint-disable */
      let center = new TMap.LatLng(latlng.lat, latlng.lon);
      this.map = new TMap.Map('allmap1', {
        center: center, //设置地图中心点坐标
        zoom: 17, //设置地图缩放级别
        // viewMode: "3D",
        // pitch: 43.5, //设置俯仰角
        // rotation: 45, //设置地图旋转角度
      });
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除比例尺控件
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除旋转控件
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除控件缩放
      /* eslint-enable */
      // 添加标记点 初始化中心点
      this.initPointMultiMarker(this.map, center);
      // 添加搜索出的poi点
      this.addMarkerLayer(this.map, mapPointlist);
      this.map.on('click', this.clickMap);
    },
    initPointMultiMarker(mapNode, center) {
      let initPoint = {
        id: 'marker',
        styleId: 'marker',
        position: center,
      };
      /* eslint-disable */
      new TMap.MultiMarker({
        id: 'pointId',
        map: mapNode,
        geometries: [initPoint],
        styles: {
          marker: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png',
          }),
        },
      });
      /* eslint-enable */
    },
    addMarkerLayer(mapNode, mapPointlist) {
      /* eslint-disable */
      let len = mapPointlist.length;
      if (!len) return;
      let markerLayerArr = [];
      for (let i = 0; i < len; i++) {
        markerLayerArr.push({
          id: mapPointlist[i].id,
          styleId: 'marker',
          position: new TMap.LatLng(mapPointlist[i].location.lat, mapPointlist[i].location.lng),
        });
      }
      new TMap.MultiMarker({
        id: 'otherPointId',
        map: mapNode,
        geometries: markerLayerArr,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
          }),
        },
      });
      // markerLayer.add(markerLayerArr);
      /* eslint-enable */
    },
    // 点击事件处理方法
    clickMap(evt) {
      var lat = evt.latLng.getLat().toFixed(6);
      var lng = evt.latLng.getLng().toFixed(6);
      console.log('您点击的的坐标是：' + lat + ',' + lng);
    },
    mapBindEvent(map) {
      // 监听地图平移开始
      map.on('pan', () => {
        console.log('监听地图平移开始');
      });
      // 监听地图平移结束
      map.on('panend', () => {
        console.log('监听地图平移结束');
      });
    },
    searchFn() {
      this.searchSHow = false;
      console.log(this.searchValue);
      getkeywordPoi({ latitude: this.pLat, longitude: this.pLot }, this.searchValue).then((res) => {
        // 不显示下拉选择
        if (!res.data.length && !this.searchValue) {
          this.searchSHow = false;
        } else {
          this.searchSHow = true;
        }
        // 联想下拉选
        this.mapsearchlist = res.data;
        // // 赋值底部列表数据
        // this.maplist = res.data;
      });
    },
    addressFn(val) {
      var that = this;
      setTimeout(() => {
        /* eslint-disable */
        that.searchSHow = false;
        that.map.setCenter(new TMap.LatLng(val.location.lat, val.location.lng));
        that.markers1.updateGeometries([
          {
            id: 'marker',
            styleId: 'marker',
            position: new TMap.LatLng(val.location.lat, val.location.lng),
          },
        ]);
        that.maplist = [];
        // 地点搜索 获取500米范围poi点
        getMapPoi({ latitude: this.pLat, longitude: this.pLot }).then((res) => {
          console.log(res);
          that.maplist = res.data;
          that.marker.setGeometries([]);
          setTimeout(() => {
            for (let p = 0; p < res.data.length; p++) {
              that.marker.updateGeometries([
                {
                  id: res.data[p].id,
                  position: new TMap.LatLng(res.data[p].location.lat, res.data[p].location.lng),
                },
              ]);
            }
          });
        });
        // 清楚选中状态
        that.addresssb = -1;
        /* eslint-enable */
      });
    },
    confirmMap() {
      console.log(this.maplist);
      console.log(this.addresssb);
      if (this.addresssb > -1) {
        this.list.addressLine = this.maplist[this.addresssb].address;
        this.lon = this.myLat;
        this.lat = this.myLon;
        this.poiAddress = this.maplist[this.addresssb].address;
        this.poiLat = this.maplist[this.addresssb].location.lat;
        this.poiLon = this.maplist[this.addresssb].location.lng;
        this.poiId = this.maplist[this.addresssb].id;
        this.poiName = this.maplist[this.addresssb].title;
        this.showmap = false;
      }
    },
    mapselect(val) {
      /* eslint-disable */
      this.searchSHow = false;
      if (val > -1) {
        this.markers.updateGeometries([
          {
            id: 'markers1',
            styleId: 'abc',
            position: new TMap.LatLng(
              this.maplist[val].location.lat,
              this.maplist[val].location.lng
            ),
          },
        ]);
      }
      /* eslint-enable */
    },
  },
};
</script>
<style scoped lang="scss"></style>