微信小程序地圖搜索

效果圖 ：

輸入關鍵字自動搜索地址

點擊地址，大頭針自動定位到位置
 

下面是代碼
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);
      }
    });
  },

以上就是實現搜索功能的核心代碼