腾讯地图——当前位置&检索位置

实现检索关键字获取建筑位置列表，类似微信的发送位置功能。

一、效果

二、代码

export default {
  name: 'TMap',
  data() {
    return {
      fromName:'',
      isForward: false,
      searchService:'',
      resultsMap:[],
      searchValue:'',
      currentAddr:{
        name:'',
        address:'',
        latLng:{}
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log(from)
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.fromName=from.name
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.name == this.fromName) {
      // 根据是否删除了订单的状态，进行判断list是否需要使用缓存数据
      to.meta.isBack = !this.isForward
    }
    next()
  },
  methods: {
    keyup(){
      let that=this
      that.clearOverlays([])
      that.searchService.search(that.searchValue)
    },
    rlInit:function(){//调用微信坐标
      let that=this
      that.$ajax.post('wechatPay/toConfig',{url1 :location.href.split('#')[0]})
      .then(response=> {
          console.log(response);
          if (response.success) {
            //alert("获取签名成功");
            wx.config({
              beta:true,
              debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId : response.data.weixinAppId, // 必填，公众号的唯一标识
              timestamp : response.data.timestamp, // 必填，生成签名的时间戳
              nonceStr : response.data.noncestr, // 必填，生成签名的随机串
              signature : response.data.signature,// 必填，签名，见附录1
              jsApiList : [ 'getLocation' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function(){
              wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                  console.log(res)
                  let latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
                  let longitude = res.longitude  // 经度，浮点数，范围为180 ~ -180。
                  let speed = res.speed // 速度，以米/每秒计
                  let accuracy = res.accuracy // 位置精度
                  that.getCuuAddr(latitude,longitude)
                }
              });
            });
          }
      })
    },
    getCuuAddr(lat,lng){
      let that=this
      let load = that.$createToast({txt:'', type:'loading',time: 100000,mask:true}).show()//加载信息
      that.$ajax.post('map/inverseAnalysis',{url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+lat+','+lng+'&get_poi=1&key='+this.$store.state.txKey})
      .then(response=> {
          console.log(response);
          if(response.success){
            that.currentAddr.address=response.data.result.address
            that.currentAddr.name=response.data.result.formatted_addresses.recommend
            that.currentAddr.latLng=response.data.result.location
          }
          load.hide();//关闭加载
      }).catch(error=> {
        load.hide();//关闭加载
      });
    },
    addressSearch(){
      let that=this
      let map = new qq.maps.Map(document.getElementById("map"), {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(25.416720, 119.012310),
        zoom: 13
      });
      let latlngBounds = new qq.maps.LatLngBounds();
      //设置Poi检索服务，用于本地检索、周边检索
      that.searchService = new qq.maps.SearchService({
        //设置搜索范围为莆田
        location: "莆田",
        //设置搜索页码为1
        pageIndex: 0,
        //设置每页的结果数为5
        pageCapacity: 30,
        //设置展现查询结构到infoDIV上
        // panel: document.getElementById('infoDiv'),
        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
        autoExtend: true,
        //检索成功的回调函数
        complete: function(results) {
          console.log(results.detail.pois)
          that.resultsMap=results.detail.pois
          map.fitBounds(latlngBounds);
          //调整地图视野
        },
        //若服务请求失败，则运行以下函数
        error: function(error) {
            console.log(error)
            that.resultsMap=[]
        }
      });
    },
    //清除地图上的marker
    clearOverlays(overlays) {
      let overlay;
      while (overlay = overlays.pop()) {
          overlay.setMap(null);
      }
    },
    againLocation(){
      this.rlInit()
    },
    choiceAddr(addr){
      console.log(addr)
      if(addr.address){
        this.isForward=true
        let queryData=this.$common.urlToObj(window.location.href)
        queryData.address=addr.address+addr.name
        queryData.lat=addr.latLng.lat
        queryData.lng=addr.latLng.lng
        queryData.isTMap=true
        this.$router.push({path:'/'+this.fromName,query:queryData})
      }else{
        this.$store.commit('toast',{message:'该地址暂无详细地址，请重新选择',type:'warn',time:2000})
      }
    }
  },
  created() {
    this.rlInit()
  },
  mounted(){
    this.addressSearch()
  }
}