全面解析小程序之百度地圖附近三千米信息檢索

##本片博客主要介紹的是小程序利用百度地圖搜索附近三千米信息

開篇先提一下，網上有不少關於小程序搜索框的，地圖地點信息檢索的，路線導航的，以及一個找事吧APP模仿的小程序。我也看過這些內容，整理一下，就是我今天要展現的。

慣例，先上總體效果圖：

這是點擊藥店，搜索附近20個藥店信息。

能夠打印出20個藥店的信息數據，本身可根據實際狀況展現。

搜索附近營業廳信息。一樣是打印20個。

以上只是兩個例子，列表中的10個信息都是能夠檢索的。點擊任意一個塊都能準確搜出你附近的地點信息。

##下面介紹主要方法步驟：
1.引入百度地圖的js,添加我的AK
2.書寫本身的wxSearch方法包
3.頁面佈局和JS寫入
4.最終效果展現

##第一步：百度地圖JS引入

在個人第一篇博客中我已經介紹過關於百度地圖開發者信息如何獲取，AK是我的小程序應用專用的ak.

bmap-wx.min.js。這是百度提供給小程序的開發JS。放上下載連接（http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download）。
固然你也能夠花點時間，在深刻了解一下百度地圖信息檢索開發文檔。

var bmap = require('../../utils/bmap-wx.min.js');

在index.js中引入你存放起來的百度地圖JS。
強調一點在百度地圖開發文檔中有詳細的說明，這裏我只說一下在JS中的各個參數表明：

var e={query:t.query||"生活服務$美食&酒店",scope:t.scope||1,filter:t.filter||"",coord_type:t.coord_type||2,page_size:t.page_size||20,page_num:t.page_num||0,output:t.output||"json",ak:a.ak,sn:t.sn||"",timestamp:t.timestamp||"",radius:t.radius||2e3,ret_coordtype:"gcj02ll"}

這一段代碼是百度地圖JS中默認的各個參數存放處，找到這段代碼，你能夠根據本身實際須要來修改各個參數的值，界面展現的信息結果也會不同的。此處的t.query默認請求的是生活服務美食酒店，也可根據我的喜愛修改。

##第二步：給頁面添加一個搜索功能

百度地圖的POI信息檢索默認是輸出地點的，可是這並非咱們想要的結果。咱們須要根據需求，設計本身想要的檢索功能，諸如這樣的：

點擊各個模塊，搜索對應的信息；你也能夠來個更簡潔的放個搜索輸入框，讓用戶本身來輸入搜索。不過，我堅信用戶更傾向於點擊搜索，這樣更一目瞭然，不是嗎。

好了咱們來看看這個搜索方法如何寫入：

<template name="wxSearch">
  <view class="wxSearch" bindtap="wxSearchTap"  style="display:{{wxSearchData.view.isShow ? 'block':'none'}};height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">
    <view  class="wxSearchInner">
        <view class="wxSearchMindKey">
            <view class="wxSearchMindKeyList">
                <block wx:for="{{wxSearchData.mindKeys}}" wx:key='' >
                    <view class="wxSearchMindKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>
                </block>
            </view>
        </view>
    </view>
  </view>
</template>

對，不須要多麼的華麗，只要放入一個簡單的搜索模塊調起便可，由於咱們要用的是點擊搜索，因此這塊能夠省略不寫。
那就剩下wxSearch.js最重要了對不對。wxSearchTap和wxSearchData這些內容咱們都必須在JS中有方法寫進，畢竟是要用到的。
wxSearch.js：

// 定義數據格式

/***
 * 
 * "wxSearchData":{
 *  configconfig:{
 *    style: "wxSearchNormal"
 *  },
 *  view:{
 *    hidden: true,
 *    searchbarHeght: 20
 *  }
 *  keys:[],//自定義熱門搜索
 *  his:[]//歷史搜索關鍵字
 *  value
 * }
 * 
 * 
 */
var __keysColor = [];

var __mindKeys = [];

function initColors(colors){
    __keysColor = colors;
}

function initMindKeys(keys){
    __mindKeys = keys;
}

function init(that, barHeight, keys, isShowKey, isShowHis, callBack) {
    var temData = {};
    var view = {
        barHeight: barHeight,
        isShow: false
    }
    
    if(typeof(isShowKey) == 'undefined'){
        view.isShowSearchKey = true;
    }else{
        view.isShowSearchKey = isShowKey;
    }

    if(typeof(isShowHis) == 'undefined'){
        view.isShowSearchHistory = true;
    }else{
        view.isShowSearchHistory = isShowHis;
    }
    temData.keys = keys;
    wx.getSystemInfo({
        success: function(res) {
            var wHeight = res.windowHeight;
            view.seachHeight = wHeight-barHeight;
            temData.view = view;
            that.setData({
                wxSearchData: temData
            });
        }
    })
    
    if (typeof (callBack) == "function") {
        callBack();
    }
    
    getHisKeys(that);
}

function wxSearchInput(e, that, callBack){
    var temData = that.data.wxSearchData;
    var text = e.detail.value;
    var mindKeys = [];
    if(typeof(text) == "undefined" || text.length == 0){
        
    }else{
        for(var i = 0; i < __mindKeys.length; i++){
            var mindKey = __mindKeys[i];
            if(mindKey.indexOf(text) > -1){
                mindKeys.push(mindKey);
            }
        }
    }
    temData.value = text;
    temData.mindKeys = mindKeys;
    that.setData({
        wxSearchData: temData
    });
}

function wxSearchFocus(e, that, callBack) {
    var temData = that.data.wxSearchData;
    temData.view.isShow = true;
    that.setData({
        wxSearchData: temData
    });
    //回調
    if (typeof (callBack) == "function") {
        callBack();
    }
    // if(typeof(temData) != "undefined"){
    //   temData.view.hidden= false;
    //   that.setData({
    //     wxSearchData:temData
    //   });
    // }else{

    // }
}
function wxSearchBlur(e, that, callBack) {
    var temData = that.data.wxSearchData;
    temData.value = e.detail.value;
    that.setData({
        wxSearchData: temData
    });
    if (typeof (callBack) == "function") {
        callBack();
    }
}

function wxSearchHiddenPancel(that){
    var temData = that.data.wxSearchData;
    temData.view.isShow = false;
    that.setData({
        wxSearchData: temData
    });
}

function wxSearchKeyTap(e, that, callBack) {
    //回調
    var temData = that.data.wxSearchData;
    temData.value = e.target.dataset.key;
    that.setData({
        wxSearchData: temData
    });
    if (typeof (callBack) == "function") {
        callBack();
    }
}
function getHisKeys(that) {
    var value = [];
    try {
        value = wx.getStorageSync('wxSearchHisKeys')
        if (value) {
            // Do something with return value
            var temData = that.data.wxSearchData;
            temData.his = value;
            that.setData({
                wxSearchData: temData
            });
        }
    } catch (e) {
        // Do something when catch error
    }
    
}
function wxSearchAddHisKey(that) {
    wxSearchHiddenPancel(that);
    var text = that.data.wxSearchData.value;
    if(typeof(text) == "undefined" || text.length == 0){return;}
    var value = wx.getStorageSync('wxSearchHisKeys');
    if(value){
        if(value.indexOf(text) < 0){
            value.unshift(text);
        }
        wx.setStorage({
            key:"wxSearchHisKeys",
            data:value,
            success: function(){
                getHisKeys(that);
            }
        })
    }else{
        value = [];
        value.push(text);
        wx.setStorage({
            key:"wxSearchHisKeys",
            data:value,
            success: function(){
                getHisKeys(that);
            }
        })
    }
    
    
}
function wxSearchDeleteKey(e,that) {
    var text = e.target.dataset.key;
    var value = wx.getStorageSync('wxSearchHisKeys');
    value.splice(value.indexOf(text),1);
    wx.setStorage({
        key:"wxSearchHisKeys",
        data:value,
        success: function(){
            getHisKeys(that);
        }
    })
}
function wxSearchDeleteAll(that){
    wx.removeStorage({
        key: 'wxSearchHisKeys',
        success: function(res) {
            var value = [];
            var temData = that.data.wxSearchData;
            temData.his = value;
            that.setData({
                wxSearchData: temData
            });
        } 
    })
}



module.exports = {
    init: init,
    initColor: initColors,
    initMindKeys: initMindKeys,
    wxSearchInput: wxSearchInput,
    wxSearchFocus: wxSearchFocus,
    wxSearchBlur: wxSearchBlur,
    wxSearchKeyTap: wxSearchKeyTap,
    wxSearchAddHisKey:wxSearchAddHisKey,
    wxSearchDeleteKey:wxSearchDeleteKey,
    wxSearchDeleteAll:wxSearchDeleteAll,
    wxSearchHiddenPancel:wxSearchHiddenPancel
}

其中：
module.exports = {
init: init,
initColor: initColors,
initMindKeys: initMindKeys,
wxSearchInput: wxSearchInput,
wxSearchFocus: wxSearchFocus,
wxSearchBlur: wxSearchBlur,
wxSearchKeyTap: wxSearchKeyTap,
wxSearchAddHisKey:wxSearchAddHisKey,
wxSearchDeleteKey:wxSearchDeleteKey,
wxSearchDeleteAll:wxSearchDeleteAll,
wxSearchHiddenPancel:wxSearchHiddenPancel
}
這裏的內容是小程序整個搜索事件的全部可能用到的事件。咱們在地圖展現中也會用到的，最基礎的就是wxSearchInput，wxSearchFocus，wxSearchKeyTap，wxSearchAddHisKey，init。將這些方法寫起來，區別於util文件夾。方便其餘頁面的調用。

##第三步：編寫咱們的主要內容
這就是正文內容了。先寫wxml內容吧：

<!--index.wxml-->
<view class='banner'> 
    <image src="../../image/banner.png"></image>
</view>

<!--nearby.wxml-->
<scroll-view class="sv" scroll-y="true">
    <view style="overflow:hidden;">
      <view class="items" wx:for="{{array}}" wx:key="" wx:for-item="item" bindtap="wxSearchFn" bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" data-code="{{item.code}}" data-text="{{item.text}}" >
        <image class="item-img" mode="aspectFit" src="{{item.src}}" ></image>
        <view class="item-text" >{{item.text}}</view>
      </view>
    </view>
    <!-- 地點緩存 -->
    <view class=" place_info"> 
      <view><text>{{placeData.title}}</text></view>
      <view><text>{{placeData.address}}</text> </view>
      <view><text>{{placeData.telephone}}</text></view>
    </view> 
    <!-- 測試地圖選點以下 -->
    <view class="data">
      <view class="data-title"><text >{{title}}</text></view>
        <view class="map_container"> 
          <map class="map" id="map" circles='{{circles}}' longitude="{{longitude}}" latitude="{{latitude}}" scale="15" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
        </view>   
    </view>
  </scroll-view>
  <!-- 導航 -->

想要搜索的名稱列表咱們用wx:for="{{array}}"來循環這個item的內容，array的內容存儲在JS的data中就能夠了。節省頁面空間。
因爲咱們將搜索框替換爲卡片點擊形式，因此還要在該item上來綁定搜索框的屬性：bindtap=「wxSearchFn」 bindinput=「wxSearchInput」 bindfocus=「wxSerchFocus」 bindblur=「wxSearchBlur」，以及點擊卡片傳入搜索對應的值value="{{wxSearchData.value}}" 。這樣就能夠確保每一個卡片單獨點擊都只會顯示對應的內容，不會亂碼搜索。

固然咱們也要輸出地圖選點後的信息結果：

<view class=" place_info"> 
 <view><text>{{placeData.title}}</text></view>
  <view><text>{{placeData.address}}</text> </view>
  <view><text>{{placeData.telephone}}</text></view>
</view>

地點的商戶名稱，地址信息，商家電話。商家電話不是每一個地點都會有的，有的商家未填寫，因此咱們在JS中進行區分。

那麼在JS中是什麼樣子呢？
下面，寫JS內容：

//index.js
//獲取應用實例
var app = getApp()
var count = 10;
var total = 0;
var code = "2";
var bmap = require('../../utils/bmap-wx.min.js');
var wxMarkerData = [];
var WxSearch = require('../../wxSearch/wxSearch.js');
Page({
  data: {
    title: "附近三千米",
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    markers: [],
    latitude: '',
    longitude: '',
    rgcData: {},
    telephone: {},
    test: '', 
    loadingHidden: false,  // loading
    array: [{
      code: '1',
      id: 'icon_1',
      src: '../../image/img1.png',
      text: '家政'
    }, {
      code: '2',
      id: 'icon_2',
      src: '../../image/img2.png',
      text: '藥店'
    }, {
      code: '3',
      id: 'icon_3',
      src: '../../image/img3.png',
      text: '銀行'
    }, {
      code: '4',
      id: 'icon_4',
      src: '../../image/img4.png',
      text: '維修'
    }, {
      code: '5',
      id: 'icon_5',
      src: '../../image/img5.png',
      text: '公廁'
    }, {
      code: '6',
      id: 'icon_6',
      src: '../../image/img6.png',
      text: '醫院'
    }, {
      code: '7',
      id: 'icon_7',
      src: '../../image/img7.png',
      text: '加油站'
    }, {
      code: '8',
      id: 'icon_8',
      src: '../../image/img8.png',
      text: '美食'
    }, {
      code: '9',
      id: 'icon_9',
      src: '../../image/img9.png',
      text: '營業廳'
    }, {
      code: '10',
      id: 'icon_10',
      src: '../../image/img10.png',
      text: '停車場'
    }],
    dataArray: []
  },

  //分類存儲
  makertap: function (e) {
    var that = this;
    var id = e.markerId;
    that.showSearchInfo(wxMarkerData, id);
  },
  onLoad: function () {
    var that = this;
   
    //初始化的時候渲染wxSearchdata
    WxSearch.init(that, 400, ['家政', '藥店', '公廁', '銀行', '營業廳', '醫院', '超市', '地鐵站', '停車場', '維修', '美食','飯店']);
    WxSearch.initMindKeys(['家政公司', '保潔公司', '大藥房', '藥店', '免費公廁', '營業廳', '銀行ATM', '三甲醫院', '地下停車場', '地鐵口', '汽車美容', '飯店', '美食廣場','中石化加油站', '中石油加油站']);
    // 新建百度地圖對象 
    var BMap = new bmap.BMapWX({
      ak: '我的ak'
    });
    var fail = function (data) {
      console.log(data)
    };
    var success = function (data) {
      wxMarkerData = data.wxMarkerData;
      that.setData({
        markers: wxMarkerData
      }); that.setData({
        latitude: wxMarkerData[0].latitude
      });
      that.setData({
        longitude: wxMarkerData[0].longitude
      })
    };

    // 發起POI檢索請求 
    BMap.search({
      "query": "",
      fail: fail,
      success: success,
      // 此處須要在相應路徑放置圖片文件 
      iconPath: '../../image/marker_red.png',
      // 此處須要在相應路徑放置圖片文件 
      iconTapPath: '../../image/marker_red.png'
    });
  },

  //點擊事件
  wxSearchFn: function (e) {
    var that = this;
    total = 0;
    code = e.currentTarget.dataset.code + "";
    var name = e.currentTarget.dataset.text + "";
    this.data.dataArray = [];
    //顯示選擇結果
    this.setData({
      title: "附近三千米: " + name
    })

    WxSearch.wxSearchAddHisKey(that);

    // 新建百度地圖對象 
    var BMap = new bmap.BMapWX({
      ak: '我的ak'
    });
    
    var fail = function (data) {
      console.log(data)
    };
    var success = function (data) {
      wxMarkerData = data.wxMarkerData;
      that.setData({
        markers: wxMarkerData
      }); that.setData({
        latitude: wxMarkerData[0].latitude
      });
      that.setData({
        longitude: wxMarkerData[0].longitude
      })
     
    };
    // 發起POI檢索請求 
    console.log("當前點擊", name)
    BMap.search({
      query: name,
      fail: fail,
      success: success,
      // 此處須要在相應路徑放置圖片文件 
      iconPath: '../../image/marker_red.png',
      // 此處須要在相應路徑放置圖片文件 
      iconTapPath: '../../image/marker_red.png'
    });
  },
  wxSerchFocus: function (e) {
    var that = this
    WxSearch.wxSearchFocus(e, that);
  },
  wxSearchBlur: function (e) {
    var that = this
    WxSearch.wxSearchBlur(e, that);
  },
  wxSearchKeyTap: function (e) {
    var that = this
    WxSearch.wxSearchKeyTap(e, that);
  },
  wxSearchDeleteKey: function (e) {
    var that = this
    WxSearch.wxSearchDeleteKey(e, that);
  },
  wxSearchDeleteAll: function (e) {
    var that = this;
    WxSearch.wxSearchDeleteAll(that);
  },
  wxSearchTap: function (e) {
    var that = this
    WxSearch.wxSearchHiddenPancel(that);
  },
  showSearchInfo: function (data, i) {
    console.log(data)
    var that = this;
    var Otitle = data[i].title;
    var Oaddress =data[i].address;
    var Otel = data[i].telephone;
    if (Otel == "" || Otel == undefined){
      that.setData({
        placeData: {
          title: '名稱：' + Otitle + '\n',
          address: '地址：' + Oaddress + '\n',
          telephone: '電話：' + "商家暫未登記"

        }
      });
    }else{
      that.setData({
        placeData: {
          title: '名稱：' + Otitle + '\n',
          address: '地址：' + Oaddress + '\n',
          telephone: '電話：' + Otel

        }
      });
    }
    
  },
  changeMarkerColor: function (data, i) {
    var that = this;
    var markers = [];
    for (var j = 0; j < data.length; j++) {
      if (j == i) {
        // 此處須要在相應路徑放置圖片文件 
        data[j].iconPath = "../../image/marker_yellow.png";
      } else {
        // 此處須要在相應路徑放置圖片文件 
        data[j].iconPath = "../../image/marker_red.png";
      }
      markers[j](data[j]);
    }
    that.setData({
      markers: markers
    });
  }
})

這裏咱們主要就是引入JS後，在data中配置各個數組數據，而後就是地圖要搜所結果。這裏你可能注意到我用了兩次地圖POI檢索。說明一下，第一次在onload中，是頁面首次加載默認顯示的檢索信息，因此默認值無需點擊，我就存儲在WxSearch.init和WxSearch.initMindKeys來進行模糊搜索匹配。

在wxSearchFn來詳細配置咱們的搜索內容和結果，var name = e.currentTarget.dataset.text + 「」;，name是咱們主要要用的參數，在query:name中進行精確搜索。

下面是搜索框的部分屬性

wxSearch EventHandle 鍵盤輸入時觸發，event.detail = {value, cursor, keyCode}，keyCode 爲鍵值，2.1.0 起支持，處理函數能夠直接 return 一個字符串，將替換輸入框的內容。
wxSerchFocus EventHandle 輸入框聚焦時觸發，event.detail = { value, height }，height 爲鍵盤高度，在基礎庫 1.9.90 起支持

對點擊結果進行展現：

var that = this;
    var Otitle = data[i].title;
    var Oaddress =data[i].address;
    var Otel = data[i].telephone;
    if (Otel == "" || Otel == undefined){
      that.setData({
        placeData: {
          title: '名稱：' + Otitle + '\n',
          address: '地址：' + Oaddress + '\n',
          telephone: '電話：' + "商家暫未登記"

        }
      });
    }else{
      that.setData({
        placeData: {
          title: '名稱：' + Otitle + '\n',
          address: '地址：' + Oaddress + '\n',
          telephone: '電話：' + Otel

        }
      });
    }

若是電話號碼爲空或者undefined則直接輸出商家電話未展現，不然就輸出原內容。

##最後結果展現

因爲樣式表我的喜愛不一樣，因此不作展現了。頁面很是簡單，祝各位開發愉快。

若是有不明之處，請評論區回覆。