uniapp和原生微信小程序map组件实现搜索功能

362 阅读1分钟

以uniapp为例 首先安装sdk包 有两种方法 1、npm安装 npm install qqmap-wx-jssdk --save 2、去官网下载一个js文件SDK包

//引用
var QQMapWX = require('qqmap-wx-jssdk')
    var qqmapsdk = new QQMapWX({
    //这个是key去官网注册获取key
        key: 'xxxxxxxxxxxxxxxxxxxxxxxx'
    })

//html    
<map  style="width: 100%; min-height: 100vh;" :scale = 'scale' :latitude="latitude" :longitude="longitude" :markers="markers" show-compass="true" enable-3D="true"></map>    
    
    
data(){
 return{
    latitude: 23.0516513,
    longitude: 113.3903287,
    scale: 15,
    markers:[]
 }
}    
 //然后自己封装了一个函数
 methods:{
  nearby_search(key) {
    var that = this;
    //var xmwzB_index = that.xmwzB_index;
    //var list_c = that.arrlist[that.xmwzB_index];
    // 判断是否请求过了,如果没请求过则请求;请求过了就直接赋值
    //if(list_c.length){
    //   that.arrlist_cur = list_c
    //}else{
      wx.showToast({
        title: '请稍后',
        icon: 'loading',
        duration: 2000
      })

      qqmapsdk.search({
        keyword: key, // 搜索关键词
        page_size: 5, // 一页展示几个
        location: that.latitude + ',' + that.longitude, //设置周边搜索中心点
        success: function (res) { //搜索成功后的回调
          wx.hideToast({});
          var arrlist = [];
          // 对获取的信息进行处理,整理出需要的字段
          // 有些可能会涉及位置跳转(需要经纬度);展示位置名(详细参数设置参考官网说明)
          arrlist.push({
                  latitude: that.latitude,
                  longitude: that.longitude,
       // 标记图片 iconPath: '',
          })
      for (var i = 0; i < res.data.length; i++) {
        arrlist.push({ // 获取返回结果,放到mks数组中
          latitude: res.data[i].location.lat,
          longitude: res.data[i].location.lng,
          distance: res.data[i]._distance,//距离
         iconPath: "",//标记图标// 标记图片 
         callout: {
                content:res.data[i].title,
                color: '#999',
                fontSize: 14,
                borderWidth: 2,
                borderRadius: 10,
                bgColor: '#fff',
                padding: 5,
                display: 'BYCLICK',
                textAlign: 'center'
          },
        })
      }

      // 每次不用重新赋值,通过下标给需要的赋值
      //var arrlist_key = 'arrlist['+xmwzB_index+']';
              //that.arrlist_cur = arrlist
    //这个是渲染标记的图标
              that.markers = arrlist
    },
    fail: function (res) {
      console.log(res);
    },
    complete: function (res) {
      //console.log(res.data);
    }
  });
//}
},
 }

祝大家工作顺利 不喜勿喷