plus.map 关键词搜索功能

因为项目使用vue与原生混合开发的APP，最近说要加上地图搜索功能，后来查阅了一下，发现还是有些坑需要踩的，遂，记录一下
api:http://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.SearchPoiResult
最后的效果如下：

具体的样式实现，我就不一一赘述，，主要说一下如何实现。

  //input 框写出来 主要是说明需要对v-model的值进行监听，搜索完，清空input时，将数组也清空
  <input class="map-address" v-model="mapaddress" type="text"  placeholder="搜索网点、地点">
  <div class="l-result" id="l-result" v-if="listShow">
    <ul>
         <li @click="toMap(list.point,list.name)" v-for="list in addressList"> 
             <i class="iconfont">&#xe715;</i>
             <div >
                 <h5>{{list.name}}</h5>
                 <p>{{list.address}}</p>
             </div>
         </li>
     </ul>
 </div>
 <div id="l_map"></div>
     **监听的代码如下：**
 watch:{
	    "mapaddress":function(){
	        if(this.mapaddress){
	            this.listShow = true;
	            this.addressList = [],
	            this.showList();
	        }else{
	            this.listShow = false;
	        }
	    }
},

然后就是搜索的具体实现
从api里可以得知，plus.map 搜索有以下：


我这次主要用的是在城市中搜索，选定的城市是无锡

 //习惯将thisa转换一下，以防和其他this对象冲突
 var self = this;
 
 //新建地图
 var map = new BMap.Map("l_map");
 
 //创建search对象
 var searchObj = new plus.maps.Search( map );
 
 // setPageCapacity()  主要是设置每页显示的条数，因为默认是10条，我希望在一页显示，就这么设定了一个
 searchObj.setPageCapacity(100);

//poiSearchInCity（城市，关键词）
 searchObj.poiSearchInCity( "无锡", self.mapaddress );
 
 //onPoiSearchComplete 表示检索完成
 //state:0时检索成功 result存放检索的结果
 searchObj.onPoiSearchComplete = function( state, result ){
 
    if ( state == 0 ) {
         if ( result.currentNumber <= 0 ) {
             MessageBox.alert('没有检索到结果', '提示');
         }
         
         //在对距离进行排序的时候，我就遇到一了坑，本来是用它自带的计算距离的方法
         //plus.maps.Map.calculateDistance( pointStart, pointEnd, successCallback, errorCallback );
         //然后将距离插入result.getPosition(i)的时候 一直给我提示，distance是null,然后我就决定还是自己计算吧
         
         var arr = [];
         for(var i=0; i<result.currentNumber; i++){
             //计算距离，并将距离加入getposition
             //self.GLOBAL.cur_position.latitude 这个是我自己的位置，懒得写了，可以查看api,昭仪i西安定位的方法
             var distance = self.getDisance(self.GLOBAL.cur_position.latitude,self.GLOBAL.cur_position.longitude,result.getPosition(i).point.latitude,result.getPosition(i).point.longitude);
             result.getPosition(i).distance = distance;
             arr.push(result.getPosition(i));
         }
		//去重这里加入的原因是，我设置每页显示100条以后，有些不够的 ，他就会重复加载
        //去重 将地址一样的排除
        
         for(var i=0;i<arr.length;i++){
             var flag = true;
             for(var j=0;j<self.addressList.length;j++){
                 if(arr[i].address == self.addressList[j].address){
                     flag = false;
                 };
             }; 
             if(flag){
                 self.addressList.push(arr[i]);
             };
         };
         self.addressList.sort(self.sortDistance('distance'));
          console.log(JSON.stringify(self.addressList));
      } else {
          MessageBox.alert('检索失败', '提示');
      }
  }
  toRad(d) {  return d * Math.PI / 180; },
  //计算距离
  getDisance(lat1, lng1, lat2, lng2) { 
      var self = this;
      var dis = 0;
      var radLat1 = self.toRad(lat1);
      var radLat2 = self.toRad(lat2);
      var deltaLat = radLat1 - radLat2;
      var deltaLng = self.toRad(lng1) - self.toRad(lng2);
      var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
      return dis * 6378137;
  },
  //距离排序
  sortDistance(property){
     return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
      }
  },

将得到的数组数据，在dom里循环出来就可以了，