微信小程序地图搜索

效果图 ：

输入关键字自动搜索地址

点击地址，大头针自动定位到位置
 

下面是代码
1. map.wxml
 

<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx;  color: #b65151">当前：{{district}}</text>
<input placeholder="输入城市"  class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}">
    <!--绑定回填事件-->
    <view >
    <!--根据需求渲染相应数据-->
    <!--渲染地址title-->
    <view class='item-title'  bindtap="backfill" id="{{index}}">{{item.title}}</view>
    <!--渲染详细地址-->
    <view class='item-details'>{{item.addr}}</view>
    </view>
    </view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" 
scale="{{scale}}"
covers="{{covers}}" show-location
  class="{{showview?'map-c':'hidden'}}"
    bindregionchange="bindregionchange"
    controls="{{controls}}"
  bindcontroltap='bindcontroltap'
>
</map>
</view>

wxss样式文件这里就不给出了，根据自己的需求定义样式

2. map.js 文件

 核心类的jar包上个博客有给出

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});

//触发关键词输入提示事件
  getsuggest: function (e) {
    var _this = this;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      region: '上海', //设置城市名，限制关键词所示的地域范围，非必填参数
      page_size:8,
      success: function (res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({
          showview: false
        })
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
              suggestion: sug
                
        });
      },
      fail: function (error) {
        console.error(error+"失败");
        _this.setData({
          showview: true
        })
      },
      complete: function (res) {
        console.log(res);
      
      }
    });
  },

搜索成功后回调的方法
 

  //方法回填
  backfill: function (e) {
    console.log("点击");
    this.setData({
      showview: true
    })
    var id = e.currentTarget.id;
    for (var i = 0; i < this.data.suggestion.length; i++) {
      if (i == id) {
     this.setData({
          backfill: this.data.suggestion[i].title,
          latitude: this.data.suggestion[i].latitude,
          longitude: this.data.suggestion[i].longitude
        });
        this.nearby_search();
        return;
      }
    }
  },

 // 根据关键词搜索附近位置
  nearby_search: function () {
    var self = this;
    
    // 调用接口
    qqmapsdk.search({
      keyword: self.data.detail,  //搜索关键词
      //boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
      location: self.data.latitude + ',' + self.data.longitude,
      page_size: 20,
      page_index: 1,
      success: function (res) { //搜索成功后的回调
        //console.log(res.data)
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].ad_info.province,
            city: res.data[i].ad_info.city,
            district: res.data[i].ad_info.district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        self.setData({
          selectedId: 0,
          nearList: sug,
          suggestion: sug
        })
        self.addMarker(sug[0]);
      },
      fail: function (res) {
        //console.log(res);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },

以上就是实现搜索功能的核心代码