山东大学项目实训——地图圈系统——微信小程序（6）

一、腾讯位置服务地点搜索api

search(options:Object)
地点搜索，搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等。

options属性说明：

调用结果

    通过属性success, fail, complete的回调参数来接收调用结果

    success的回调参数可以有2个，第1个参数接收调用结果，第2个参数控制返回处理后的数据（非必须参数）,示例：success:function(res,data)

二、示例

WXML 模板文件中添加map组件，并绑定markers数据：

<!--绑定点击事件-->
<button bindtap="nearby_search">搜索周边KFC</button>
<!--地图容器-->
<map id="myMap"
   markers="{{markers}}"
   style="width:100%;height:300px;"
   longitude="116.313972"
   latitude="39.980014" scale='16'>
</map>

Javascript 关键代码片段：

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '开发密钥（key）' // 必填
});
 
// 事件触发，调用接口
nearby_search:function(){
   var _this = this;
   // 调用接口
   qqmapsdk.search({
      keyword: 'kfc',  //搜索关键词
      location: '39.980014,116.313972',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/resources/my_marker.png", //图标路径
            width: 20,
            height: 20
          })
        }
        _this.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res){
        console.log(res);
      }
  });
}

接口调用说明
search(options:Object)方法调用接口服务如下：

/ws/place/v1/search 地点搜索

三、项目代码

around.wxml文件代码如下：

<navBar 
    title-text="周边" 
    back-icon="../../src/images/back@3x.png"
    background="#f2f2f2"
    bindback="back"/>
<view class="search_head">
  <!-- <view class="search_area_1">搜索 </view> -->
  <text class="search_area_2">{{name}}</text>
  <!-- <view class="search_area_3"> 旁边</view> -->
</view>
<view class="container">
    <view class="weui-grids">
        <view class="weui-grid" wx:for="{{routers}}" wx:key="name" data-id="{{index}}" bindtap='chooseClassify'>
            <navigator url="{{item.url+'?name='+item.name+'&code='+item.code}}" >
                <view class='weui-grid__bg'>
                    <view class="weui-grid__icon">
                        <image src="{{item.icon}}" mode="scaleToFill" />
                    </view>
                    <text class="weui-grid__label">{{item.name}}</text>
                </view>
            </navigator>
        </view>
    </view>
</view>

around.js文件代码如下：

// pages/around/around.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mapKey: "MKWBZ-IH53W-NGSRB-OTOS7-2SW52-AHBOI",
    routers: [{
      name: '美食',
      icon: '../../src/images/food.png',
      id: '0'
    },
    {
      name: '酒店',
      url: '/pages/Course/course',
      icon: '../../src/images/hotel.png',
      id: '1'
    },
    {
      name: '景点',
      url: '/pages/Course/course',
      icon: '../../src/images/jingdian.png',
      id: '2'
    },
    {
      name: '银行',
      icon: '../../src/images/bank.png',
      id: '3'
    },
    {
      name: '生活服务',
      icon: '../../src/images/life.png',
      id: '4'
    },
    {
      name: '汽车',
      icon: '../../src/images/car.png',
      id: '5'
    },
    {
      name: '超市',
      icon: '../../src/images/chaoshi.png',
      id: '6'
    },
    {
      name: '公司企业',
      icon: '../../src/images/qiye.png',
      id: '7'
    },
    {
      name: '公园',
      icon: '../../src/images/公园.png',
      id: '8'
    }
    ],
    classifyClassId:0,
    classifyClassName:"",
    keysValue:"",
    latitude:0,
    longitude:0,
    multiToMap:[],
    mks:[],
    adr:[],
    address:{},
    name:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var address = JSON.parse(options.address)
    this.setData({
      address,
      name:options.name,
      longitude:address.longitude,
      latitude:address.latitude
    })
  },

  chooseClassify(e) {
    let that = this,
      id = e.currentTarget.dataset.id;
    that.setData({
      classifyClassId: id
    })
    const classifyClassArr = that.data.routers;
    classifyClassArr.forEach(function (v, i) {
      if (i == id) {
        that.setData({
          classifyClassName: v.name,
          keysValue: v.name,
          searchTipsArr: [], //清空提示
          adrIsShow: true,
          polyline: [],    //清空路线
          tolatitude: "",
          tolongitude: "",
        })
        that.serachkeywords(v.name); //搜索关键字    
        // that.getMultiDisDur(); //地址列表信息
      }
    })
  },
  serachkeywords(keyword) {
    var that = this,
      mapKey = that.data.mapKey,
      keyword = that.data.keysValue,
      currentCity = that.data.currentCity,
      lat = that.data.latitude,
      lng = that.data.longitude;
    var latlng = lat + ',' + lng;

    // 搜索接口
    var _url = "";
    _url = "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" + latlng + ",1000,1)&orderby=_distance&keyword=" + keyword + "&page_size=10&page_index=1&key=" + mapKey + "";
    var opt = {
      url: _url,
      method: 'GET',
      dataType: 'json',
      success(res) {
        console.log(res)
        var mks = [],//存makers地标显示
          adr = []; //存地址信息
        for (var i = 0; i < res.data.data.length; i++) {
          mks.push({
            id: res.data.data[i].id,
            title: res.data.data[i].title,
            address: res.data.data[i].address,
            latitude: res.data.data[i].location.lat,
            longitude: res.data.data[i].location.lng,
          });
          adr.push({
            id: res.data.data[i].id,
            title: res.data.data[i].title,
            address: res.data.data[i].address,
            latitude: res.data.data[i].location.lat,
            longitude: res.data.data[i].location.lng,
            distance: "",
            duration: ""
          });
        }

        //多个地址终点
        var multiToMap = "";
        adr.map(function (v, i, array) {
          multiToMap += v.latitude + "," + v.longitude + ";";
        });
        that.setData({
          mks,
          adr,
          multiToMap: multiToMap.substring(0, multiToMap.length - 1)
        });


      }, fail(res) {
        console.log(res);
      },
      complete(res) {
        // console.log(res);
      }
    }
    // wx.request(opt);
    wx.request({
      url: _url,
      method: 'GET',
      dataType: 'json',
      success(res) {
        console.log(res)
        var mks = [],//存makers地标显示
          adr = []; //存地址信息
        for (var i = 0; i < res.data.data.length; i++) {
          mks.push({
            id: res.data.data[i].id,
            title: res.data.data[i].title,
            address: res.data.data[i].address,
            latitude: res.data.data[i].location.lat,
            longitude: res.data.data[i].location.lng,
            tel: res.data.data[i].tel,
            category: res.data.data[i].category,
          });
          adr.push({
            id: res.data.data[i].id,
            title: res.data.data[i].title,
            address: res.data.data[i].address,
            latitude: res.data.data[i].location.lat,
            longitude: res.data.data[i].location.lng,
            distance: "",
            duration: ""
          });
        }

        //多个地址终点
        var multiToMap = "";
        adr.map(function (v, i, array) {
          multiToMap += v.latitude + "," + v.longitude + ";";
        });
        that.setData({
          mks,
          adr,
          multiToMap: multiToMap.substring(0, multiToMap.length - 1)
        });
        that.goto();

      }, fail(res) {
        console.log(res);
      },
      complete(res) {
        // console.log(res);
      }
    })
    
  },
  goto(){
    console.log(this.data.mks)
    wx.navigateTo({
      url: '/pages/arounddetail/arounddetail?type=' + this.data.classifyClassName + '&detail=' + JSON.stringify(this.data.mks) + '&address=' + JSON.stringify(this.data.address),
    })
  }
})

around.wxss文件代码如下：

/* pages/around/around.wxss */
page{
  background-color:#E4E7ED
}
.search_head{
  margin: 15rpx;
  height: 80rpx;
  background-color: #fff;
  border-radius: 15rpx;
  display: flex;
}
.search_area_1{
  flex: 1;
  color: rgb(153, 155, 158);
  font-size: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_area_3{
  flex: 1;
  color: rgb(153, 155, 158);
  font-size: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.search_area_2{
  flex: 1;
  color: #000;
  /* font-size: 40rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
}
/**index.wxss**/

/**app.wxss**/
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5rpx 0;
    box-sizing: border-box;
    background-color: #fff;
    margin: 15rpx;
} 

.weui-grids {
    position: relative;
    overflow: hidden;
}

.weui-grids:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.weui-grids:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.weui-grid {
    position: relative;
    float: left;
    padding: 20px 10px;
    width: 33.33333333%;
    box-sizing: border-box;
}

.weui-grid:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.weui-grid:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.weui-grid:active {
    background-color: #ececec;
}

.weui-grid__bg {
    position: relative;
    float: left;
    padding: 0px 0px;
    width: 100%;
    box-sizing: border-box;
}

.weui-grid__icon {
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

.weui-grid__icon image {
    display: block;
    width: 100%;
    height: 100%;
}

.weui-grid__icon + .weui-grid__label {
    margin-top: 5px;
}

.weui-grid__label {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.swiper-item {
    display: block;
    height: 150px;
    width: 100%;
}

四、效果展示

地图上随机点击一个地点：

点击周边按钮：

具体的周边显示还有待完善。。。很快就会有效果展示。